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

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

一、制作海报图片

二、保存图片到相册

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

详细步骤：

一、制作海报

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

<button class="shareBtns" bindtap='onSaveImg'></button>
<canvas canvas-id="myCanvas" style="position:fixed;visibily:hidden;width: 646px; height: 966px;" />

因为我需要的图片大小是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))
},

二、保存图片到相册

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

//保存图片到相册
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
                                });
                            }
                        }
                    });
                }
            }
        })
    }
},

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

这个就不需要细说了。

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

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