详解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 相关文章推荐
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 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
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
TBCompressor js代码压缩
2011/01/05 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
在Django中限制已登录用户的访问的方法
2015/07/23 Python
set在python里的含义和用法
2019/06/24 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
2014年计生标语
2014/06/23 职场文书
施工单位安全责任书
2014/07/24 职场文书
公司员工安全协议书
2014/11/21 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
goland 设置project gopath的操作
2021/05/06 Golang
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js