Canvas 跨域脱坑实践

hufeng 发布于2019-08-23 12:49 / 3033人阅读

摘要：跨域如何解决这里记录下使用绘图过程中所遇到的跨域问题和解决方案。先来看下实现方法。跨域正常情况下，如果需要将绘制好的图像输出，我们可以调用的或方法来获取到图像数据。然而，遇到图片跨域的情况就有些尴尬了。

Canvas 跨域如何解决？这里记录下使用 Canvas 绘图过程中所遇到的跨域问题和解决方案。

先来看下实现方法。

实现方法

目标图片一般是由图片 + 文本构成。无论是千奇百怪的大小图片，还是变幻莫测的各式文本，都能用 canvas api drawImage 和 fillText 方法来完成。

基本流程如下:

获取 canvas 上下文 -- ctx

const canvas = document.querySelector(selector)
const ctx = canvas.getContext("2d")

绘图

忽略图片上的内容，直接用 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 文档。

获取图像数据

调用 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

如此，你便可以拿到图片数据了。如果没招，换同域资源吧～

GPU云服务器云服务器脱坑记 Canvas _canvas 2canvas

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99029.html

优秀博文收藏（不定期更新）

摘要：我的书签我的书签谨慎导入，小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧，让你少写不必要的，代码更优雅一劳永我的书签我的书签（谨慎导入，小心覆盖）工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...

sunsmell 2019-08-26 13:54 评论0 收藏0
优秀博文收藏（不定期更新）

摘要：我的书签我的书签谨慎导入，小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧，让你少写不必要的，代码更优雅一劳永我的书签我的书签（谨慎导入，小心覆盖）工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...

zhangfaliang 2019-08-30 10:57 评论0 收藏0
Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

摘要：过程中一些常见的问题讲真这本篇文章真的是良心文章，感觉作者了，一些见到过没见到过的问题都差不多能找到了。 Vue过程中一些常见的问题讲真这本篇文章真的是良心文章，感觉作者了，一些见到过没见到过的问题都差不多能找到了。

calx 2019-08-21 17:39 评论0 收藏0