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实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 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
解析ajax事件的调用顺序
2013/06/17 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
解决python 输出是省略号的问题
2018/04/19 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
python实现换位加密算法的示例
2018/10/14 Python
python实现KNN分类算法
2019/10/16 Python
python实现拼图小游戏
2020/02/22 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
会计专业应届生求职信
2013/11/24 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
低碳环保标语
2014/06/12 职场文书
高中学校对照检查材料
2014/08/31 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
任命书标准格式
2015/03/02 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server