WKwebview 和 canvas

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

1. 由于是ios上蓝牙打印,前期定位问题的思路一直是怎么通过蓝牙调试,但是查了写资料,好像要买硬件设备所以就放弃了.直接在页面上alert进行观察,执行情况.

2. alert(JSON.stringify(canvas)); 打印出来是 {}, 我一度以为是canvas的标签和WKwebview不兼容,耽误了好多时间,(自己又在chrome控制台打印也是{},才发现不是canvas问题)

3. 最后看到一篇文章 https://www.jb51.net/html5/604662.html (自己也感觉到了是img的问题了)然后按照这个方法试了,在打个包测一下果然没问题了.

4. 其实根本原因就是在canvas中绘制一张外链图片.img跨域导致的问题,所以加上image.setAttribute(“crossOrigin”,“anonymous”);就可以了