Canvas跨域的解决方案
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
如此,你便可以拿到图片数据了。如果没招,换同域资源吧~
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfgkij
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01