图片转成Base64

var img = "imgurl";//imgurl 就是你的图片路径  

function getBase64Image(img) {

     var canvas = document.createElement("canvas");

     canvas.width = img.width;

     canvas.height = img.height;

     var ctx = canvas.getContext("2d");

     ctx.drawImage(img, 0, 0, img.width, img.height);

     var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();

     var dataURL = canvas.toDataURL("image/"+ext);

     return dataURL;

}  

var image = new Image();

image.src = img;

img.setAttribute('crossOrigin', 'anonymous');

image.onload = function(){ var base64 = getBase64Image(image); console.log(base64); }

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

经过查阅和分析，发现这个其实是由于视频文件所在的域和图片和页面所在域不同，出现跨域传输的问题。

解决方案1.

如果想使用toDataURL()生成图片文件的话，在canvas绘图过程中使用的图片应该是当前域下的。

解决方案2.

访问的服务器允许，资源跨域使用，也就是说设置了CORS跨域配置，Access-Control-Allow-Origin

然后在客户端访问图片资源的时候

img.setAttribute('crossOrigin', 'anonymous');

秒客网

图片转成Base64

相关文章