微信小程序制作海报保存到相册发朋友圈

深碍√TFBOYSˉ_ 2022-05-23 09:37 239阅读 0赞

这个功能应该分三步来做：

一、制作海报图片

二、保存图片到相册

三、手动发朋友圈再到相册中取图片

详细步骤：

一、制作海报

1.要制作能保存到相册的图片，我们需要一个canvas标签，在我们的wxml的最后加入canvas标签：

因为我需要的图片大小是646\*966的图片，所以大家根据自己相应的需求设置大小。

2.在wxml文件相应的js文件中：

//先制作一个canvas标签，再保存成图片
    onSaveImg: function () {
        const ctx = wx.createCanvasContext('myCanvas');         //看回wxml里的canvas标签，这个的myCanvas要和标签里的canvas-id一致
    
        ctx.clearRect(0, 0, 644, 966);
        ctx.drawImage("../../img/test1.png", 0, 0, 646, 966);
        ctx.drawImage("../../img/test2.png", 0, -60, 646, 966);
        ctx.drawImage("../../img/tipsImg" + this.data.tipsImgId + ".png", 79, 291 - 60, 492, 244);
        ctx.drawImage("../../img/test3.jpg", 90, 780 - 60, 135, 135);
        ctx.setFillStyle("#02446e");
        ctx.setFontSize(26);
        ctx.fillText("亲爱的" + this.data.testName + this.data.testId, 100, 610 - 60);
        ctx.setTextAlign("center");
        ctx.fillText("你的有入扔有人不迷", 435, 790 - 60);
    
        ctx.setTextAlign("left");
        ctx.setFillStyle("black");
        ctx.setFontSize(18);
        ctx.fillText("我等你", 330, 825 - 60);
        ctx.setFontSize(22);
    
        ctx.drawImage("../../img/test4.png", 0, 936 - 60, 646, 30);
        var self = this;
    
        ctx.draw(true, setTimeout(function () {     //为什么要延迟100毫秒？大家测试一下
            wx.canvasToTempFilePath({
                x: 0,
                y: 0,
                width: 646,
                height: 966,
                destWidth: 646,
                destHeight: 966,
                canvasId: 'myCanvas',
                success: function (res) {
                  self.data.savedImgUrl = res.tempFilePath;
                  self.saveImageToPhoto();
                }
            })
        }, 100))
    },

二、保存图片到相册

这个功能和我的[上一篇文章][Link 1]的功能一致，以下是这个案例的代码：

//保存图片到相册
    saveImageToPhoto: function () {
        if (this.data.savedImgUrl != "") {
            wx.saveImageToPhotosAlbum({
                filePath: this.data.savedImgUrl,
                success: function () {
                    wx.showModal({
                        title: '保存图片成功',
                        content: '寻人启事已经保存到相册，您可以手动分享到朋友圈！',
                        showCancel: false
                    });
                },
                fail: function (res) {
                    console.log(res);
                    if (res.errMsg == "saveImageToPhotosAlbum:fail cancel") {
                        wx.showModal({
                            title: '保存图片失败',
                            content: '您已取消保存图片到相册！',
                            showCancel: false
                        });
                    } else {
                        wx.showModal({
                            title: '提示',
                            content: '保存图片失败，您可以点击确定设置获取相册权限后再尝试保存！',
                            complete: function (res) {
                                console.log(res);
                                if (res.confirm) {
                                    wx.openSetting({})      //打开小程序设置页面，可以设置权限
                                } else {
                                    wx.showModal({
                                        title: '保存图片失败',
                                        content: '您已取消保存图片到相册！',
                                        showCancel: false
                                    });
                                }
                            }
                        });
                    }
                }
            })
        }
    },

三、手动发朋友圈再到相册中取图片

这个就不需要细说了。

总结：现在的小程序没有发朋友圈的权限，但是劳动人民的智慧是无穷的。所以上面的方法应该是解决这个问题比较普遍的方法了。

还有，如果大家只想发图片到朋友圈，就只需要第二、三步就可以了。至于保存图片到相册更细节的知识点，可以看我的[上一篇文章][Link 1]。

[Link 1]: https://blog.csdn.net/u013654125/article/details/80500306