上传图片，前端直接转base64格式图片数据，并canvas画出来_Html教程_奇迪科技(深圳)有限公司(www.qvdv.net)

这里讲到两个关键问题点：

1、上传图片，在前端转为base64格式，用到的是FileReader()函数；

2、canvas画图。

直接上代码：

<input type="file" style="display: none" id="file" onClick="up()">
<canvas id="canvas"></canvas>
<script type="text/javascript">
function up(){
var reader = new FileReader();
var file = $(this)[0].files[0];
var imgUrlBase64;
if (file) {
reader.readAsDataURL(file);//将文件以Data URL形式读入页面  
reader.onload = function (e) {
//这就是base64格式图片数据
imgUrlBase64= e.target.result; 
//imgUrlBase64= imgUrlBase64.substring(imgUrlBase64.indexOf(",") + 1);//截取base64码部分（是否有必要，看需求）
// canvas
//获取canvas元素
var cvs = document.getElementById("canvas");
//创建image对象
var imgObj = new Image();
imgObj.src = imgUrlBase64;
//待图片加载完后，将其显示在canvas上 
imgObj.onload = function(){
var ctx = cvs.getContext('2d');
ctx.clearRect(0,0,imgObj.width,imgObj.height);
ctx.drawImage(this, 0, 0);
//this即是imgObj,保持图片的原始大小
//ctx.drawImage(this, 0, 0,1024,768);//改变图片的大小到1024*768 
}; 
}
}
}
</script>