“被污染”的 canvas

什么是“被污染”的 canvas?

尽管不通过 CORS 就可以在画布中使用图片，但是这会污染画布。一旦画布被污染，你就无法读取其数据。例如，你不能再使用画布的 toBlob(), toDataURL() 或 getImageData() 方法，调用它们会抛出安全错误。

这种机制可以避免未经许可拉取远程网站信息而导致的用户隐私泄露。

如何在canvas中使用跨越图片

HTML 规范中图片有一个 crossorigin 属性，结合合适的 CORS 响应头，就可以实现在画布中使用跨域元素的图像。

设置 Access-Control-Allow-Origin 为 "\*"

例如通过url获取base64图片，代码如下

1getImgBase64 (path, callback) {
2	let img = new Image()
3	img.crossOrigin = 'anonymous'
4	img.onload = function () {
5		let canvas = document.createElement('canvas')
6		let ctx = canvas.getContext('2d')
7		// 获取图片宽高
8		let imgWidth = img.width
9		let imgHeight = img.height
10		// 设置画布宽高与图片宽高相同
11		canvas.width = imgWidth
12		canvas.height = imgHeight
13		// 绘制图片
14		ctx.drawImage(img, 0, 0, imgWidth, imgHeight)
15
16		// 图片展示的 data URI
17		let dataUrl = canvas.toDataURL('image/jpeg')
18		callback(dataUrl)
19	}
20
21	img.onerror = function () {
22	}
23	img.src = path
24}

回调处理

1getImgBase64(imgUrl, function (base64) {
2  console.log(base64)
3})

版权信息

链接/posts/bei-wu-ran-de-canvas

日期2018/04/18

协议CC BY-NC-SA 4.0 转载请注明出处

暂无评论，来抢沙发吧。