canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法


Posted in HTML / CSS onJanuary 18, 2019

我们要绘制一张图片,内容包括一张背景图和一个动态生成的二维码,前提是背景图是项目本身的静态资源,二维码是服务端动态生成的,二者不在同一域名下。

解决办法:把所有图片都重定向同一个域名下:

let count = 0;
let bgImg = document.creatElement('img');
let qrImg = document.creatElement('img');
bgImg.src = redirectUrl('x.png');
qrImg.src = redirectUrl('y.png');
[bgImg, qrImg].forEach((e) => {
    e.onload = () => {
        count ++;
        if (count === 2) {
            drawerImg(bgImg, qrImg);  
        }
    }
})
function redirectUrl (url) {
    return 'https://xxx/view?fileUrl=' + encodeURIComponent(url);
}
function drawerImg (imgContent, qrContent, scaleBy = 2) {
    let {bgImgW, bgImgH} = {375, 800};
    let {qrx, qry, qrw, qrh} = {20, 700, 50, 50};
    let Canvas = document.createElement('canvas');
    let ctx = Canvas.getContext("2d");
    Canvas.width = bgImgW * scaleBy;
    Canvas.height= bgImgH * scaleBy;
    ctx.drawImage(imgContent, 0, 0, bgImgW * scaleBy, bgImgH * scaleBy);
    ctx.drawImage(qrContent, qrx * scaleBy, qry * scaleBy, qrw * scaleBy, qrh * scaleBy);
    
    let nodeI = document.createElement("img");
    nodeI.src = Canvas.toDataURL();
    document.body.appendChild(nodeI)
}

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

HTML / CSS 相关文章推荐
使用CSS3制作倾斜导航条和毛玻璃效果
Sep 12 HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
使用CSS连接数据库的方式
Feb 28 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 #HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 #HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 #HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 #HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 #HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 #HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 #HTML / CSS
You might like
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
php实现的ping端口函数实例
2014/11/12 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
两种php实现图片上传的方法
2016/01/22 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
jQuery功能函数详解
2015/02/01 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
python中bisect模块用法实例
2014/09/25 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
接口可以包含哪些成员
2012/09/30 面试题
物业电工岗位职责
2013/11/20 职场文书
文秘专业个人求职信
2013/12/22 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
七一活动主持词
2015/06/29 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
Java 多线程协作作业之信号同步
2022/05/11 Java/Android