帖子
帖子
用户
博客
课程
显示全部楼层

海报合成

[复制链接]
发表于 2021-1-4 17:19:55
本帖最后由 不知道起什么名字 于 2021-1-4 17:22 编辑

                    let canvas = document.querySelector("#canvas");
                    let qr = document.getElementById("qrCode_");
                    let ctx = canvas.getContext("2d");
                    let img = new Image();
                    img.src = "背景图地址";
                    img.onload = function() {
                        let w = img.width * 1;
                        let h = img.height * 1;
                        canvas.width = w;
                        canvas.height = h;
                        ctx.drawImage(img, 0, 0, w, h);
                        // 对二维码进行初始化
                        let qrcode = new QRCode(qr, {
                            width: 120,//根据实际调整二维码大小
                            height: 120,
                            colorDark: "#000000",
                            colorLight: "#ffffff",
                            correctLevel: QRCode.CorrectLevel.L
                        });
                        var url = "二维码内容"
                        qrcode.makeCode(url);
                        let base64 = qr.firstChild.toDataURL("image/png", 1);
                        let shareQr = new Image();                       
                        shareQr.src = base64;
                        shareQr.onload = function() {
                            ctx.drawImage(shareQr, w - 156, h - 156, 120, 120);
                            //生成图片base64地址;
                           let base64url=canvas.toDataURL("image/png", 1)
                        };

                    };


              //图片下载与保存
                    //使用trans模块
                       var trans = api.require('trans');
                        var base64Str = base64url.replace(/^data:image\/\w+;base64,/, "");//使用trans将base64转图片地址需去除data:image前缀   
                           //base64url为之前合成图片base64url
                        var imgPath = "fs://img/";//保存路径
                        var imgName = "test.png";//保存名称
                        trans.saveImage({
                            base64Str: base64Str,//处理后的base64字符串
                            imgPath: imgPath,
                            imgName: imgName,
                            album: true,
                        }, function(ret, err) {
                           if (ret.status) {
                         //保存成功
                           }


                        });





html 内容

   <div id="qrCode_" style="display: none;"></div>
    <canvas id="canvas" style="display: none;"></canvas>



备注:
需添加trans模块
引入qrcode.js


您需要登录后才可以回帖 登录

本版积分规则