这个功能应该分三步来做:
一、制作海报图片
二、保存图片到相册
三、手动发朋友圈再到相册中取图片
详细步骤:
一、制作海报
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))
},
二、保存图片到相册
这个功能和我的上一篇文章的功能一致,以下是这个案例的代码:
//保存图片到相册
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
});
}
}
});
}
}
})
}
},
三、手动发朋友圈再到相册中取图片
这个就不需要细说了。
总结:现在的小程序没有发朋友圈的权限,但是劳动人民的智慧是无穷的。所以上面的方法应该是解决这个问题比较普遍的方法了。
还有,如果大家只想发图片到朋友圈,就只需要第二、三步就可以了。至于保存图片到相册更细节的知识点,可以看我的上一篇文章。