Canvas跨域脱坑的示例分析

小编给大家分享一下Canvas跨域脱坑的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、响应式网站设计、程序开发、网站优化、微网站、小程序制作等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的成都网站设计、网站建设、网站设计、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体。

先来看下实现方法。

实现方法

目标图片一般是由 图片 + 文本 构成。无论是千奇百怪的大小图片,还是变幻莫测的各式文本,都能用 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

以上是“Canvas跨域脱坑的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


标题名称:Canvas跨域脱坑的示例分析
转载来源:http://pwwzsj.com/article/podidd.html