前端利用 canvas(画布)将两张图片合为一张图并长按保存本地相册

使用apiClound 务必添加 trans() 模块

apiClound 长按方法

               apiready = function() {
                   api.parseTapmode();
                   // 长按事件执行保存图片
                    api.addEventListener({
                        name: 'longpress'
                    }, function(ret, err) {
                    // actionSheet 是apiclound 底部弹出事件
                        api.actionSheet({
                            title: '',
                            cancelTitle: '取消',
                            buttons: ['保存图片']
                        }, function(ret, err) {
                            var index = ret.buttonIndex;
                            if (index == 1) {
                                saveLocal();
                                api.toast({
                                    msg: '已保存',
                                    duration: 2000,
                                    location: 'middle'
                                });
                            }
                        });

                    });
                  }

整合图片

                // 整合图片
                // bg ,qr 是我ajax 请求的图片          
                function drawAndShareImage(bg, qr) {
                    var canvas = document.createElement("canvas");
                    canvas.width = 1340;
                    canvas.height = 1992;
                    var context = canvas.getContext("2d");
                    context.rect(0, 0, canvas.width, canvas.height);
                    context.fillStyle = "#fff";
                    context.fill();
                    var myImage = new Image();
                    myImage.setAttribute('crossOrigin', 'anonymous');
                    myImage.src = `${bg}`; //背景图片 你自己本地的图片或者在线图片
                    // myImage.crossOrigin = '*';
                    myImage.onload = function() {
                        context.drawImage(myImage, 0, 0, 1340, 1992);
                        context.font = "60px Courier New";
                        context.fillText("我是文字",350,450);
                        var myImage2 = new Image();
                        myImage2.setAttribute('crossOrigin', 'anonymous');
                        myImage2.src = `data:image/jpeg;base64,${qr}`; //你自己本地的图片或者在线图片
                        // myImage2.crossOrigin = '*'; //Anonymous
                        myImage2.onload = function() {
                            context.drawImage(myImage2, 50, 1650, 300, 300);
                            var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
                            console.log(base64)  //base64为整合后的图片
                            
                            // ------------------------------------------------------------------------------------------------------
                            
                            // 调用 saveLocal() 保存图片到本地
                            var str = base64.slice(22);
                            console.log(str);
                            saveLocal(str)

                        }
                    }
                }

apiClound 里面的 trans 模块方法保存本地方法

// 保存图片到本地
                function saveLocal(e) {
                    var trans = api.require('trans');
                    trans.saveImage({
                        base64Str: e,
                        album: true,
                        imgPath: "fs://icon/",
                        imgName: "yy.png"
                    }, function(ret, err) {
                        if (ret.status) {
                            alert("保存")
                            document.getElementById('img2').src = api.fsDir + '/' + 'icon' + '/' + 'yy.png';
                        } else {
                            alert("失败")
                        }
                    });
                }

你可能感兴趣的:(JavaScript,apiClound)