帆布跨域脱坑的示例分析 - 行业资讯 - 肥雀云

　　介绍

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

先来看下实现方法。

<强>实现方法

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

基本流程如下:

1,获取画布上下文- ctx

const canvas =, document.querySelector(选择) 　　const ctx =, canvas.getContext (& # 39; 2 d # 39;)

2,绘图

忽略图片上的内容,直接用drawImage将其画到画布画布上即可。

const image =, new 图像() 　　image.src =src 　　image.onload =,(),=祝辞,{ 　　,,,ctx.save () 　　,,,//,这里我们采用以下参数调用　　,,,this.ctx.drawImage(图像,,dx, dy,, dWidth,, dHeight) 　　,,,this.ctx.restore () 　　}

drawImage有3种参数使用方式,具体用法可以查看MDN文档。

3,获取图像数据

调用HTMLCanvasElement DOM对象提供的toBlob (), toDataURL()或getImageData()方法,即可。

canvas.toBlob (blob =祝辞,{ 　　,,,//,你要的,团　　},,mimeType, encoderOptions)

这里的mimeType默认值为图像/png.encoderOptions指定了图片质量,可用于压缩,不过需要mimeType格式为图像/jpeg或者/webp图像。

<强>帆布跨域

正常情况下,如果需要将绘制好的图像输出,我们可以调用帆布的toBlob (), toDataURL()或getImageData()方法来获取到图像数据。然而,遇到图片跨域的情况就有些尴尬了。可能回报如下错误:

未能执行& # 39;toBlob& # 39;> img.crossOrigin =, & # 39;匿名# 39;
为避免未经许可拉取远程网站信息而导致的用户隐私泄露(如GPS等信息,具体可搜索Exif),在调用帆布的toBlob (), toDataURL()或getImageData()会抛出安全错误:

未能执行& # 39;toBlob& # 39;> const image =, new 图像() 　　时间=image.crossOrigin & # 39;匿名# 39; 　　image.src =, src
以上是“画布跨域脱坑的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
帆布跨域脱坑的示例分析