如果我们要在网页上处理图片，对于字符形式接收到的图片（比如用ajax获取的图片）可以将其转换为。但对于img标签（或通过new Image()对象获取的图片）来说，它们不是字符形式，而是html元素，不能转换成blob对象。

要使用这样的图片，我们可以先将图片绘制到canvas里，再使用canvas对象的toDataURL方法获取图片的base64编码。

代码如下：

var dataURL=""; var Img = new Image(); Img.crossOrigin = "Anonymous"; Img.src=""; Img.onload=function(){ var canvas = document.createElement("canvas"); canvas.width=Img.width; canvas.height=Img.height; canvas.getContext("2d").drawImage(Img,0,0,Img.width,Img.height); //将图片绘制到canvas中 dataURL=canvas.toDataURL('image/png'); //转换图片为dataURL };

注意image对象的crossOrigin 属性：

Img.crossOrigin = "Anonymous";

它在下面的情况中是有用的：
图片跨域了，但有个好消息是图片的服务器允许跨域。这时你加上这个crossOrigin属性就ok了，图片可以正常用。

但如果图片跨域了，并且图片的服务器【不允许】跨域，那你加上也没用，无解。

如果没解决跨域限制，canvas.toDataURL方法将报错，导致程序终止：

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

使用canvas将图片转换为base64编码