详解Canvas 跨域脱坑实践活动

日期:2021-02-23 类型:科技新闻 

关键词:如何制作微信小游戏,微信游戏小程序,公众号游戏,h5小游戏模板,小程序游戏源码

Canvas 跨域怎样处理?这里纪录下应用 Canvas 制图全过程中所遇到的跨域难题调解决计划方案。

先看来下完成方式。

完成方式

总体目标照片1般是由 照片 + 文字 组成。不管是稀奇古怪的尺寸照片,還是变幻莫测莫测的各式文字,都能用 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

这般,你即可以拿到照片数据信息了。假如没招,换同域資源吧~

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:Html5 Canvas动漫基本碰撞检验的完成 返回下一篇:没有了