将图片变成canvas，可以利用canvas转变成dataUrl格式，方便上传
将图片变成canvas，可以利用canvas转变成dataUrl格式，方便上传，记录一下。demo完整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas学习,将图片变成canvas</title>
<style>
/* canvas的css样式控制canvas的实际大小，可以大小任意。元素内部的width控制画板的大小，
context控制内容大小 。重点还是在画板和内容大小，元素大小无所谓*/
</style>
</head>
<body>
<img src="http://a2.att.hudong.com/53/51/16300000178518124461515846560_950.jpg" alt="">
<canvas id='canvasObj' ></canvas>
<!-- <canvas id='canvasObj5' width='200px' height='200px'></canvas> -->
<hr>
<script>
var canvas=document.getElementById('canvasObj');
// var img=document.getElementById('img');
var ctx=canvas.getContext('2d');
var img = new Image();
// img.setAttribute("crossOrigin",'Anonymous')
img.src = "http://a2.att.hudong.com/53/51/16300000178518124461515846560_950.jpg";
img.id='img';
img.οnlοad=function(){
//console.log(img.width,document.getElementById('img'))//640 null
//此时不存在img这个dom，所以offsetWidth,offsetHeight无法获取，都是0.
canvas.width=img.width*2; //0.5会变模糊，2会清晰
canvas.height=img.height*2;
canvas.style.width=img.width+'px'; //记住样式设置必须加px单位字符串
canvas.style.height=img.height+'px';
console.log(canvas.height,canvas.style.width)
// ctx.drawImg(img,0,0);
ctx.scale(2,2)
ctx.drawImage(img, 0, 0);
//这里会报错，因为canvas要求图片路径同源。如果是项目在服务器上线了就不会报错。
console.log(canvas.toDataURL('image/png'))
}
</script>
</body>
</html>