JavaScript合并图片与二维码

一般涉及到小程序的项目，都有一个分享的二维码。有的时候大家可能需要把二维码和其他图片合并，做一张海报等等需求。在网上看到很多说是引用jQuery，或者HTML2Canvas和qrcode.js。这里给大家分享的是用canvas合并。

①图片的跨域

image.png

首先呢，我们使用canvas加载绘制图片的时候，会涉及到图片跨域的问题。比如看上面的这个图片

Access to image at 'file:///C:/xxx.jpg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https
这是说在访问“file:///C:/xxx.img”处的图像/频道列表.jpg“已被CORS策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome extension、chrome untrusted、https。

img.html:41 GET file:///C:/Users/xxx.jpg net::ERR_FAILED
这是说在获取这个路径的图片获取失败

因此如果是一张在线的图片，那么就需要在图片服务器上设置跨域头，并且前端加载图片之前将<img>标签的crossOrigin设置为*，否则就会报错。

为什么会这样呢？具体说法是：可避免未经许可拉取远程网站信息而导致的用户隐私泄露。

解决步骤

1.使用img标签的crossOrigin属性，设置其值为anonymous。如：

var image= new Image();
image.src = 'img/img01.jpg';
image.setAttribute("crossOrigin",'anonymous');

或者：

var image= new Image();
image.src = 'img/umg01.jpg'; 
image.crossOrigin = 'Anonymous';

也可以：

<img src="" alt="" crossOrigin="Anonymous" />

②图片的加载

canvas绘制是需要加载完成的图片，这里我们就要用到<img>标签的onload事件，在图片加载完成后立即执行。所有浏览器都支持onload事件，而且上文中也提到创建JavaScript图片对象var image = new Image();。

③图片的合并

直接上代码

<template>
    <div>
        <img id="avatar" src="" alt="">
    </div>
</template>

<script>
    import img01 from './img01.png';
    import img02 from './img02.png';
    export default {
        data() {
            return {
                
            }
        },
        created() {
            this.handleBlock()
        },
        methods: {
            handleBlock() {
                // 动态创建canvas标签
                var canvas = document.createElement("canvas");
                // 设置canvas画布宽度和高度
                canvas.width = 350;
                canvas.height = 700;
                // 创建context对象
                var context = canvas.getContext("2d");
                // 用context.rect方法绘制矩形
                context.rect(0 , 0 , canvas.width , canvas.height);
                // 进行染色
                context.fillStyle = "#fff";
                // 渲染
                context.fill();
                // 创建一个image对象
                var myImage = new Image();
                myImage.src = img02;    //背景图片  你自己本地的图片或者在线图片
                // 跨域，必须
                myImage.crossOrigin = 'Anonymous';
                // 使用img的onload事件
                myImage.onload = function(){
                    // 画布定义自己要插入的图片
                    context.drawImage(myImage , 0 , 0 , 350 , 700);
                    // 这里是绘制文字，我这里不需要，所以注释了
                    // context.font = "60px Courier New";
                    // context.fillText("山有木兮木有枝，心悦君兮君不知",350,450);
                    // 创建第二个img对象
                    var myImage2 = new Image();
                    myImage2.src = img01;   //你自己本地的图片或者在线图片
                    // 图片跨域，必须
                    myImage2.crossOrigin = 'Anonymous';
                    myImage2.onload = function(){
                        context.drawImage(myImage2 , 100 ,225 , 175, 175);
                        // canvas生成img图片
                        //如果是生成png格式，那么就"image/png" 
                        // 如果是要生成jpg格式，那么就改为"image/jpeg"
                        var base64 = canvas.toDataURL("image/png"); 
                        var img = document.getElementById('avatar');
                        document.getElementById('avatar').src = base64;
                    }
                }
                
            }
        }
    }
</script>

附注：最好使用vue或者react，否则单纯的用html写小demo(.html文件)还是会报图片跨域的问题。

如果是用html写的小demo，推荐使用VScode编辑器，在编辑器扩展这里（快捷键ctrl+shift+x），打开后输入open，选择open in browser，如图

image.png

安装后，在编辑器ctrl+s保存好代码之后，右击，选择open with Live Server（快捷键Alt+L或者Alt+O）如图：

image.png

这样会自动打开你的默认浏览器，在编辑器修改代码保存后，页面也会自动刷新，只要设置了img标签的跨域属性，基本不会报错啦

好了，这篇文章到这里就要结束了，如果您正在看这篇文章，觉得对您有帮助的话，就麻烦您的小手手给我点个赞吧^ _ ^，如果有任何疑惑或建议，都可在下方留言，一起交流、学习。