WKwebview 和 canvas
公司app的项目,有个蓝牙打印的bug.
下面展示一些 代码片段。
var image = new Image();
//TODO: 下面这个是解决问题的关键
image.setAttribute("crossOrigin","anonymous");
image.onload = function(){
imageData = convertImageToCanvas(image, size);
defer.resolve(useEscPrintImage(imageData));
};
image.src = url;
function convertImageToCanvas(image,size) {
var canvas = document.createElement("canvas");
canvas.width = size;
canvas.height = size;
// alert(JSON.stringify(canvas)); 打印出来是 {}
canvas.getContext("2d").drawImage(image, 0, 0, size, size);
return canvas.getContext("2d").getImageData(0,0,size, size);
}
-
由于是ios上蓝牙打印,前期定位问题的思路一直是怎么通过蓝牙调试,但是查了写资料,好像要买硬件设备所以就放弃了.直接在页面上alert进行观察,执行情况.
-
alert(JSON.stringify(canvas)); 打印出来是 {}, 我一度以为是canvas的标签和WKwebview不兼容,耽误了好多时间,(自己又在chrome控制台打印也是{},才发现不是canvas问题)
-
最后看到一篇文章 https://www.jb51.net/html5/604662.html (自己也感觉到了是img的问题了)然后按照这个方法试了,在打个包测一下果然没问题了.
-
其实根本原因就是在canvas中绘制一张外链图片.img跨域导致的问题,所以加上image.setAttribute(“crossOrigin”,“anonymous”);就可以了