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教程:边框属性border的极致应用
Apr 02 HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 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
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
用Python编写简单的定时器的方法
2015/05/02 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
Python 实现链表实例代码
2017/04/07 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
银行求职推荐信范文
2013/11/30 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
促销活动总结怎么写
2014/06/25 职场文书
高中同学会活动方案
2014/08/14 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
比较node.js和Deno
2021/04/27 Javascript
Python first-order-model实现让照片动起来
2022/06/25 Python
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS