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 animate制作绚丽的动画效果
Nov 24 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
HTML中meta标签及Keywords
Apr 15 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 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和ACCESS写聊天室(五)
2006/10/09 PHP
PHP通用检测函数集合
2006/11/25 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
自定义jQuery选项卡插件实例
2013/03/27 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
介绍Python中的fabs()方法的使用
2015/05/14 Python
分析python请求数据
2018/08/19 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
县级文明单位申报材料
2014/05/23 职场文书
员工生日会策划方案
2014/06/14 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
国际贸易实训总结
2015/08/03 职场文书
酒店厨房管理制度
2015/08/06 职场文书
如何用python插入独创性声明
2021/03/31 Python
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS