发布：2018/10/11 11:45:21作者：管理员 来源：本站 浏览次数：1413
这个功能应该分三步来做：
一、制作海报图片
二、保存图片到相册
三、手动发朋友圈再到相册中取图片
详细步骤：
一、制作海报
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
-
});
-
}
-
}
-
});
-
}
-
}
-
})
-
}
-
},
三、手动发朋友圈再到相册中取图片
© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4