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

问题描述

问 题

代码如下：
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) 

}
请问该怎么解决？

解决方案

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

这篇关于javascript - 用canvas处理图片后使用toDataURL方法报错是什么原因？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！