HTML2Canvas图片合成

需求描述

首先呢，点击分享按钮截取当前窗口生成一张图片，将生成的图片和二维码图片使用canvas合并成一张图片，然后使用Layui的Open打开弹框将图片放进去。

我遇到的问题

在前期阶段截取当前图片合并成另一张图片这一块是没有问题的

发布完之后呢~
在测试阶段遇到了一个问题：
用layer.Open打开弹框的时候图片是空白的？
不单单是这个
安卓系统打开的全是空白弹框
当我使用ios的时候，图片竟然出来，我第一反应是兼容问题？还是因为安卓和ios的像素问题。我重新反复看了下代码 逻辑上并没有错误（用户点击按钮，截取当前屏幕 生成一个image 再将本地的二维码image 和之前生成的image合并 合并完之后打开弹框 图片就出来了）
所以我换了另一种方法

代码

html

<div class="index-title">
        <button onclick="drawAndShareImage()" id="btn" class="layui-btn layui-btn-primary">点击下载</button>
 </div>
<div class="content" style="display:none;">
    <img id="img" class="img" width="100%" height="100%" crossorigin="anonymous">
</div>

<img src="/Content/image/网站二维码.png" id="img1" style="display:none" />

<div class="imga">
    <i class="layui-icon layui-icon-close closeimg" style="position: absolute; right: 10px; font-size: 30px;background-color:white;border-radius:20px 20px 20px 20px;"></i>
    <img id="img3" crossorigin="anonymous" width="100%"/>
</div>

js

 <script>

        $(function () {
            sj1();

            $(".closeimg").click(function () {
                $(".imga").css("display","none")
            })
        })  

        function drawAndShareImage() {
            var canvas = document.createElement("canvas");
            canvas.width = 400;
            canvas.height = 600;
            var context = canvas.getContext("2d");

            context.rect(0, 0, canvas.width, canvas.height);
            context.fillStyle = "#fff";
            context.fill();

            var myImage = new Image();
            myImage.src = $("#img").attr("src");    //背景图片  你自己本地的图片或者在线图片
            myImage.crossOrigin = 'Anonymous';

            myImage.onload = function () {
                context.drawImage(myImage, 0, 0, 450, 600);


                var myImage2 = new Image();
                myImage2.src = $("#img1").attr("src");   //你自己本地的图片或者在线图片
                myImage2.crossOrigin = 'Anonymous';

                myImage2.onload = function () {
                    context.drawImage(myImage2, 265, 455, 130, 130);
                    var base64 = canvas.toDataURL("image/png");  //"image/png" 这里注意一下
                    var img = document.getElementById('img3');

                    // document.getElementById('avatar').src = base64;
                    img.setAttribute('src', base64);
                }
            }
            $(".imga").css("display","block")
            //layer.open({
            //    type: 1,
            //    title: '海报生成',
            //    area: ['80%', '80%'],
            //    content: $('#img3'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            //    cancel: function () {
            //        // 右上角关闭事件的逻辑
            //        $("#img3").css("display", "none")
            //    },
            //});
        }

        //function draw() {
           

        //    var img1 = document.getElementById("img1"),
        //        img2 = document.getElementById("img"),
        //        img3 = document.getElementById("img3");
        //    img1.width = 70;
        //    img1.height = 70;
        //    img2.width = 400;
        //    img2.height = 600;
        //    var canvas = document.createElement("canvas"),
        //        context = canvas.getContext("2d");
        //    canvas.width = img2.width;
        //    canvas.height = img2.height;
        //    // 将 img2 加入画布
        //    context.drawImage(img2, 0, 0, img2.width, img2.height);

        //    // 将 img1 加入画布
        //    context.drawImage(img1, 195, 455, img1.width, img1.height);

        //    context.stroke();
        //    // 将画布内容导出
        //    console.log(canvas.toDataURL())
        //    img3.src = canvas.toDataURL();
        //    layer.open({
        //        type: 1,
        //        title: '海报生成',
        //        area: ['300px', '600px'],
        //        content: $('#img3'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        //        cancel: function () {
        //            // 右上角关闭事件的逻辑
        //            $("#img3").css("display", "none")
        //        },
        //    });
        //}
        function sj1() {
            var x = 1;
            y = 4;
            var dom = parseInt(Math.random() * (y - x + 1) + x);
            $("#img").attr("src", "/Content/image/db" + dom + ".jpg")
        }
    </script>

drawAndShareImage()方法解释

我换了一个方法。我自己在本地添加几张海报，每次去给他随机显示一张海报合成二维码
代码如上drawAndShareImage（）
这个是可以解决根本问题，如下图：![在这里插入图片描述](https://img-blog.csdnimg.cn/20210416141611482.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzIxNTc3Nw==,size_16,color_FFFFFF,t_70#pic_center

draw()方法

这种方法也可，具体看如何操作
但是未用到onload后续可能会有不必要的麻烦（个人看法）

最后呢 遇到的问题到现在也没看出是什么问题，不知道是ios和安卓系统问题还是layer弹框的异常问题或者说是我的一个逻辑问题 有不同见解的欢迎评论
前端萌新路过~只是把问题的解决思路和代码放出仅供参考
记录每一天码农生涯