详解Canvas 跨域脱坑实践
canvas 跨域如何解决？这里记录下使用 canvas 绘图过程中所遇到的跨域问题和解决方案。
先来看下实现方法。
实现方法
目标图片一般是由 图片 + 文本 构成。无论是千奇百怪的大小图片，还是变幻莫测的各式文本，都能用 canvas api drawimage 和 filltext 方法来完成。
基本流程如下:
1、获取 canvas 上下文 -- ctx
const canvas = document.queryselector(selector)
const ctx = canvas.getcontext('2d')
2、绘图
忽略图片上的内容，直接用 drawimage 将其画到 canvas 画布上即可。
const image = new image()
image.src = src
image.onload = () => {
ctx.save()
// 这里我们采用以下参数调用
this.ctx.drawimage(image, dx, dy, dwidth, dheight)
this.ctx.restore()
}
drawimage 有3种参数使用方式，具体用法可以查看mdn 文档。
3、获取图像数据
调用 htmlcanvaselement dom 对象提供的 toblob(), todataurl() 或 getimagedata() 方法，即可。
canvas.toblob(blob => {
// 你要的 blob
}, mimetype, encoderoptions)
这里的 mimetype 默认值为 image/png。encoderoptions 指定了图片质量，可用于压缩，不过需要 mimetype 格式为 image/jpeg 或者 image/webp。
canvas 跨域
正常情况下，如果需要将绘制好的图像输出，我们可以调用 canvas 的 toblob(), todataurl() 或 getimagedata() 方法来获取到图像数据。然而，遇到图片跨域的情况就有些尴尬了。可能回报如下错误:
failed to execute 'toblob' on 'htmlcanvaselement': tainted canvases may not be exported.
或者
access to image at 'https://your.image.src' from origin 'https://your.website' has been blocked by cors policy: no 'access-control-allow-origin' header is present on the requested resource.
先来看看第2种情况。
access-control-allow-origin
如果你跨域使用某些图片资源，并且该服务未正确响应 access-control-allow-origin 头信息, 则会报出如下错误信息:
access to image at 'https://your.image.src' from origin 'https://your.website' has been blocked by cors policy: no 'access-control-allow-origin' header is present on the requested resource.
说明不允许跨域访问，那么你可以试着让后台修改 access-control-allow-origin 的值为 * 或 your.website, 或者改用同域资源（考虑下？）。
接下来，我们来解决第1种情况。
img.crossorigin = 'anonymous'
为避免未经许可拉取远程网站信息而导致的用户隐私泄露（如 gps 等信息，具体可搜索 exif），在调用 canvas 的 toblob(), todataurl() 或 getimagedata() 会抛出安全错误:
failed to execute 'toblob' on 'htmlcanvaselement': tainted canvases may not be exported.
如果你的图片服务允许跨域使用（如果不允许，见上条），那么你该考虑下给 img 元素加上 crossorigin 属性，即：
const image = new image() image.crossorigin = 'anonymous' image.src = src
如此，你便可以拿到图片数据了。如果没招，换同域资源吧～
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。