Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
大概意思是canvas没法执行toDataURL方法:污染的画布没法输出,请原谅个人灵魂翻译。
经google 发现原来是受限于 CORS 策略,会存在跨域问题,虽然可使用图像(好比append到页面上)可是绘制到画布上会污染画布,一旦一个画布被污染,就没法提取画布的数据,好比没法使用使用画布toBlob(),toDataURL(),或getImageData()方法;当使用这些方法的时候 会抛出一个安全错误apache
解决方案:canvas
图片设置 :crossOrigin属性
代码片断:img.setAttribute("crossOrigin",'Anonymous')跨域
完整代码:安全
`` var canvas=document.getElementById("canvas"),//获取canvas ctx = canvas.getContext("2d"), //对应的CanvasRenderingContext2D对象(画笔) img = new Image(),//建立新的图片对象 base64 = '' ;//base64 img.src = 'http://www.xxxx.png'; img.setAttribute("crossOrigin",'Anonymous') img.onload = function(){//图片加载完,再draw 和 toDataURL ctx.drawImage(img,0,0); base64 = canvas.toDataURL("image/png"); };