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

chemzqm 发布于2019-08-23 14:48 / 1956人阅读

摘要：我们要绘制一张图片，内容包括一张背景图和一个动态生成的二维码，前提是背景图是项目本身的静态资源，二维码是服务端动态生成的，二者不在同一域名下。解决办法把所有图片都重定向同一个域名下

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

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

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)
}

GPU云服务器云服务器跨域解决办法的解决办法微软的解决办法 use的解决办法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101158.html

JavaScript中的图片处理与合成(一)

摘要：中的图片处理与合成一引言图片处理现在已经成为了我们生活中的刚需，想必大家也经常有这方面的需求。实际前端业务中，也经常会有很多的项目需要用到图片加工和处理。 JavaScript中的图片处理与合成(一) 引言：图片处理现在已经成为了我们生活中的刚需，想必大家也经常有这方面的需求。实际前端业务中，也经常会有很多的项目需要用到图片加工和处理。由于过去一段时间公司的业务需求，让我在这方面积累...

Charles 2019-08-22 15:01 评论0 收藏0
前端跨域分析及解决办法

摘要：为什么有跨域问题因为浏览器的同源策略，导致了跨域问题的出现。一同源策略什么是同源策略同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。为什么需要同源策略出于安全原因，浏览器限制从脚本内发起的跨源请求。为什么有跨域问题因为浏览器的同源策略，导致了跨域问题的出现。一. 同源策略 1. 什么是同源策略同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的...

includecmath 2019-08-26 14:04 评论0 收藏0
网页保存为图片及高清截图的优化 | canvas跨域图片配置

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中...

zhaochunqi 2019-08-01 17:43 评论0 收藏0