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

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

一、制作海报图片

二、保存图片到相册

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

详细步骤：

一、制作海报

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

这个功能和我的上一篇文章 <https://blog.csdn.net/u013654125/article/details/80500306>
的功能一致，以下是这个案例的代码：
//保存图片到相册 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 }); } } }); } } }) } },
三、手动发朋友圈再到相册中取图片

这个就不需要细说了。

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

还有，如果大家只想发图片到朋友圈，就只需要第二、三步就可以了。至于保存图片到相册更细节的知识点，可以看我的上一篇文章
<https://blog.csdn.net/u013654125/article/details/80500306>。

热门工具换一换