用canvas处理图片后使用toDataURL方法报错是什么原因？

Question

代码如下：

var img = new Image; 

img.crossOrigin = "Anonymous" ;//不加此行代码报Tainted canvases may not be exported.

加了报Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin 'null' is therefore not allowed access.

img.src = 'imgs/1.png'; 

img.onload = function () {

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);

ctx.fillStyle = '#000';   // 文字填充颜色  

ctx.font = '13px Adobe Ming Std';  

ctx.fillText('怎么得到你想要的?',10,20);  

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

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

console.log(dataURL) 

}

请问该怎么解决？

Answer 1

不要直接双击html文件预览，你可以弄个server来访问这个html