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

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

一、制作海报图片

二、保存图片到相册

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

详细步骤：

一、制作海报

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
                                });
                            }
                        }
                    });
                }
            }
        })
    }
},

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

这个就不需要细说了。

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

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

最后

以上就是健壮发夹为你收集整理的微信小程序制作海报保存到相册发朋友圈的全部内容，希望文章能够帮你解决微信小程序制作海报保存到相册发朋友圈所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。