wxml:<button class='baocun' bindtap='baocun' >保存到本地相册</button>
wxss:
/* 生成海报样式 */
.imagePathBox {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
}
.shengcheng {
width: 657rpx;
height: 942rpx;
z-index: 9999;
box-shadow: 0px 10rpx 26rrpx 1rpx rgba(0, 0, 0, 0.2);
border-radius: 20rpx;
}
.s_cancleIMH {
z-index: 9999;
position: fixed;
bottom: 100rpx;
width: 500rpx;
height: 120rpx;
line-height: 80rpx;
text-align: center;
}
.baocun {
z-index: 9999;
display: block;
width: 90%;
height: 98rpx;
padding: 0;
line-height: 98rpx;
text-align: center;
position: fixed;
bottom: 30rpx;
left: 5%;
background: #2ebc40;
color: #fff;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
box-shadow: 0px -10px 26rpx 1px rgba(0, 0, 0, 0.13);
border-radius: 10rpx;
}
.b_text {
float: left;
display: block;
width: 50%;
}
button[class="baocun"]::after {
border: 0;
}
.s_cancle {
z-index: 9999;
width: 30rpx;
height: 30rpx;
}
.saveImg,.openSetting{
position: absolute;
bottom: 10px;
js:
//点击保存到相册
baocun: function(res) {
let that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.imagePath,//图片路径
success(res) {
wx.showModal({
content: '图片已保存到相册，赶紧晒一下吧~',
showCancel: false,
confirmText: '朕知道啦',
confirmColor: '#333',
success: function(res) {
if (res.confirm) {
/* 该隐藏的隐藏 */
that.setData({
maskHidden: false
})
}
},
})
},
fail: function(err) {
if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
wx.showModal({ // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: modalSuccess => {
wx.openSetting({
success(settingdata) {
console.log("settingdata", settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '提示',
content: '获取权限成功,再次点击图片即可保存',
showCancel: false,
})
} else {
wx.showModal({
title: '提示',
content: '获取权限失败，将无法保存到相册哦~',
showCancel: false,
})
}
},
fail(failData) {
console.log("failData", failData)
},
complete(finishData) {
console.log("finishData", finishData)
}
})
}
})
}
},
complete(res) {
wx.hideLoading()
}
})
},
附带生成海报全部代码：
// 生 成 海报
//将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
createNewImg: function() {
let that = this;
let context = wx.createCanvasContext('mycanvas');
let contextW = 675;
let contextH = 1200;
context.width = 675;
context.height = 1200;
let x = context.width / 2;
context.setFillStyle("#ffffff")
context.fillRect(0, 0, contextW, contextH)
let avatarUrl = that.data.touxiang;
let code = that.data.code
let subText = that.data.egvido.subText;
let videoPicUrl = that.data.videoPicUrl;
//如果有图就用本身的图，如果没有图就用本地默认的图
if (that.data.videoPicUrl == '') {
let videoPicUrl = 'http://v.cdn.ikanbei.com/miniappPic/picNotExistsPic.png';
} else {
let videoPicUrl = that.data.videoPicUrl;
}
//绘制视频默认图片
context.drawImage(videoPicUrl, 0, 0, 675, 390);
let play = that.data.play;
var text = that.data.egvido.subText; //这是要绘制的文本';
var chr = text.split(""); //这个方法是将一个字符串分割成字符串数组
var temp = "";
var row = [];
context.setFontSize(34)
context.setFillStyle("#000")
context.setTextAlign('left');
for (var a = 0; a < chr.length; a++) { // 超出换行
if (context.measureText(temp).width < 570) {
temp += chr[a];
} else {
a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
row.push(temp);
temp = "";
}
}
row.push(temp);
if (row.length > 3) {
var rowCut = row.slice(0, 3);
var rowPart = rowCut[1];
var test = "";
var empty = [];
for (var a = 0; a < rowPart.length; a++) {
if (context.measureText(test).width < 540) {
test += rowPart[a];
} else {
break;
}
}
empty.push(test);
var group = empty[0] + "..." //
// 这里只显示两行，超出的用...表示
rowCut.splice(1, 1, group);
row = rowCut;
}
var b = 0;
for (var b = 0; b < row.length; b++) {
context.fillText(row[b], 50, 450 + b * 40, 610);
}
// 绘制汉语翻译
let subtextZh = that.data.egvido.subtextZh;
var subzh = that.data.egvido.subtextZh; //这是要绘制的文本
var sub = subzh.split(""); //这个方法是将一个字符串分割成字符串数组
var shuzu = "";
var rowsubzh = [];
context.setFontSize(26);
context.setFillStyle('#808080');
context.setTextAlign('left');
for (var a = 0; a < sub.length; a++) {
if (context.measureText(shuzu).width < 540) {
shuzu += sub[a];
} else {
a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
rowsubzh.push(shuzu);
shuzu = "";
}
}
rowsubzh.push(shuzu);
// //如果数组长度大于2 则截取前两个
if (rowsubzh.length > 2) {
let rowcai = rowsubzh.slice(0, 2);
let rowdePart = rowcai[1];
let dem = "";
let empty = [];
for (var a = 0; a < rowdePart.length; a++) {
if (context.measureText(test).width < 520) {
dem += rowdePart[a];
} else {
break;
}
}
empty.push(dem);
let group = empty[0] + "..." //这里只显示两行，超出的用...表示
rowcai.splice(1, 1, group);
rowsubzh = rowcai;
}
for (var c = 0; c < rowsubzh.length; c++) {
context.fillText(rowsubzh[c], 50, 480 + c * 30 + b * 30);
}
//绘制二维码
context.drawImage(code, 0, 680, 675, 290);
context.draw();
//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
setTimeout(function() {
wx.canvasToTempFilePath({
x: 0, //指定的画布区域的左上角横坐标
y: 0, //指定的画布区域的左上角纵坐标
width: 675, //指定的画布区域的宽度
height: 1200, //指定的画布区域的高度
destWidth: 675, //输出的图片的宽度
destHeight: 1200, //输出的图片的高度
canvasId: 'mycanvas',
fileType: 'jpg', //图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。
quality: 1,
success: function(res) {
let tempFilePath = res.tempFilePath;
that.setData({
imagePath: tempFilePath,
canvasHidden: true
});
},
fail: function(res) {
}
});
}, 200);
},
bindcancle: function() {
/* 该隐藏的隐藏 */
this.setData({
maskHidden: false
})
},
//点击保存到相册
baocun: function(res) {
let that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.imagePath,
success(res) {
wx.showModal({
content: '图片已保存到相册，赶紧晒一下吧~',
showCancel: false,
confirmText: '朕知道啦',
confirmColor: '#333',
success: function(res) {
if (res.confirm) {
/* 该隐藏的隐藏 */
that.setData({
maskHidden: false
})
}
},
})
},
fail: function(err) {
if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
wx.showModal({ // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: modalSuccess => {
wx.openSetting({
success(settingdata) {
console.log("settingdata", settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '提示',
content: '获取权限成功,再次点击图片即可保存',
showCancel: false,
})
} else {
wx.showModal({
title: '提示',
content: '获取权限失败，将无法保存到相册哦~',
showCancel: false,
})
}
},
fail(failData) {
console.log("failData", failData)
},
complete(finishData) {
console.log("finishData", finishData)
}
})
}
})
}
},
complete(res) {
wx.hideLoading()
}
})
},
//点击生成
formSubmit: function(e) {
let that = this;
this.setData({
maskHidden: false
});
wx.showToast({
title: '海报生成中...',
icon: 'loading',
duration: 10000
});
setTimeout(function() {
wx.hideToast()
that.createNewImg();
that.setData({
maskHidden: true
});
}, 1000)
this.getimg()
},
//图片宽高处理
imgLoad: function(e) {
var that = this;
wx.getSystemInfo({
success(res) {
if (res.windowHeight > 700) {
that.setData({
height: 230
})
} else {
that.setData({
height: 20
})
}
}
})
},
/** * 生命周期函数--监听页面显示 */
getimg() {
let that = this;
wx.getUserInfo({
success: res => {
var vurl = wx.getStorageSync('vurl'); //网络图片地址
if (vurl == null || vurl == '' || vurl == undefined) {
var simgurl = 'http://v.cdn.ikanbei.com/miniappPic/picNotExistsPic.png'
} else {
var simgurl = vurl
}
wx.downloadFile({
url: simgurl, //仅为示例，并非真实的资源
success: function(res) {
var filePath = res.tempFilePath;
if (res.statusCode === 200) {
that.setData({
videoPicUrl: filePath,
})
}
}
})
}
})
},