php 抓取网页生成图片(图片转base64遇到两个问题.png代码片段)

　　php 抓取网页生成图片(图片转base64遇到两个问题.png代码片段)

　　使用html5画布将图片绘制到画布上，然后使用画布的toDataURL方法。

　　但是，在将图像转换为base64的过程中遇到了两个问题。

　　图片.png

　　代码片段如下：

　　 var canvas=document.getElementById("canvas"),//获取canvas

ctx = canvas.getContext("2d"), //对应的CanvasRenderingContext2D对象(画笔)

img = new Image(),//创建新的图片对象

base64 = '' ;//base64

img.src = 'http://www.xxxx.png';

ctx.drawImage(img,0,0);

base64 = canvas.toDataURL("image/png");

　　这时候我想问题应该是图片在加载之前就已经绘制好了。既然是这种情况，修改如下：

　　 var canvas=document.getElementById("canvas"),//获取canvas

ctx = canvas.getContext("2d"), //对应的CanvasRenderingContext2D对象(画笔)

img = new Image(),//创建新的图片对象

base64 = '' ;//base64

img.src = 'http://www.xxxx.png';

img.onload = function(){//图片加载完，再draw 和 toDataURL

ctx.drawImage(img,0,0);

base64 = canvas.toDataURL("image/png");

};

　　改完后，正要喝一杯水庆祝一下。一刷新页面，一口老血喷了出来，chrome控制台又报如下错误：

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

　　可能是canvas无法执行toDataURL方法：被污染的canvas无法输出，请原谅我的灵魂翻译。

　　google发现原来是受CORS策略限制，会出现跨域问题。虽然可以使用图像（例如附加到页面），但在画布上绘制会污染画布。一旦画布被污染，就无法提取画布数据。例如，您不能使用画布 toBlob()、toDataURL() 或 getImageData() 方法；使用这些方法时，会抛出安全错误

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

　　具体细节附上一个非常详细的链接如下：，值得一看，个人理解可能不到位，建议阅读此链接。

　　解决方案：

　　图片设置：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");

};

　　关于stackoverflow的解决方案：

　　地址：

　　Tips：如果遇到其他关于SecurityError的canvas问题，也可以试试这个解决方案。

　　另外，经过多次搜索，总结了几个tips

　　1：使用谷歌。百度搜了几篇文章，干扰太大。

　　2：先搜bug屋：stackoverflow，你的bug总有解决办法，链接：

　　3：网页文档之家：Mozilla的网页文档很权威，也很详细。关联：