详解Canvas 跨域脱坑实践


Posted in HTML / CSS onNovember 07, 2018

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

先来看下实现方法。

实现方法

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 #HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 #HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 #HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 #HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 #HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 #HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 #HTML / CSS
You might like
JavaScript创建命名空间的5种写法
2014/06/24 PHP
php简单复制文件的方法
2016/05/09 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
python语言使用技巧分享
2016/05/31 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
大学活动总结模板
2014/07/10 职场文书
仓管员岗位职责
2015/02/03 职场文书
人事文员岗位职责
2015/02/04 职场文书
民事答辩状范本
2015/05/21 职场文书
可怜妈妈观后感
2015/06/09 职场文书
房产证明范本
2015/06/19 职场文书
开学第一周总结
2015/07/16 职场文书
《实心球》教学反思
2016/02/23 职场文书