解决canvas中获取跨域图片数据的问题
背景
在一张图片添加相关文字,然后转化为base64数据,上传至服务器。当代码上线写完部署到测试环境,控制台报出如下错题:
Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
经过排查,页面在请求图片时产生跨域情况,canvas认为该图片数据为 污染的数据
,是不安全的数据,无法导出base64数据。
为什么 canvas 认为跨域图片数据为 污染的数据
当请求跨域图片数据,而未满足跨域请求资源的条件时。如果canvas使用未经跨域允许的图片的原始数据,这些是不可信的数据,可能会暴露页面的数据。
请求图片资源 - 同域
Request Headers带有cookie。图片数据是被canvas信任的。
请求图片资源 - 跨域
默认情况下,直接请求跨域图片。因为不符合跨域请求资源的条件,图片数据是不被canvas信任的。
为了解决图片跨域资源共享的问题, <img>
元素提供了支持的属性:crossOrigin
,该属性一共有两个值可选:anonymous
和 use-credentials
,下面列举了两者的使用场景,以及满足的条件。
anonymous | use-credentials | |
---|---|---|
用途 | 匿名请求跨域图片资源,不会发送证书(比如cookie等) | 具名请求跨域图片资源,会携带证书数据 |
Request Headers | origin | origin、cookie |
Response headers | Access-Control-Allow-Origin | Access-Control-Allow-Origin、Access-Control-Allow-Credentials |
所需条件 | Access-Control-Allow-Origin 字段值需要包含请求域。 | Access-Control-Allow-Origin 字段值需要包含请求域,且不能为通配符 *。Access-Control-Allow-Credentials 字段值需要为 true,表明允许请求发送证书数据。 |
代码示例:
// page origin is https://a.com
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
context.drawImage(this, 0, 0);
context.getImageData(0, 0, img.width, img.height);
};
img.src = 'https://b.com/a.png';
结束语
总结了请求图片资源的所有场景:同域、匿名跨域、具名跨域,以及跨域成功所需的条件。希望可以帮到遇到类似问题的小伙伴。
参考
13 声望
1 粉丝
推荐阅读
由z-index属性,引发对层叠上下文的全面认知
在日常开发中,经常使用z-index样式属性调整元素的层级大小。一般情况下,都能达到元素之间覆盖效果的要求。但在某些场景下,不论定位元素z-index属性值设置多大,都无法在页面的最顶层呈现。虽然可以可以把该元...
尽吾志者阅读 642
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...
乌柏木赞 143阅读 11.9k评论 10
从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...
乌柏木赞 60阅读 6k评论 16
再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...
libinfs赞 39阅读 6.2k评论 12
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...
乌柏木赞 39阅读 7.1k评论 6
CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^<...
XboxYan赞 42阅读 2.8k评论 14
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库
XboxYan赞 34阅读 2.2k评论 2
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。