z 生成海报
<canvas canvas-id='posterCanvas' style="width: 320px; height: 450px;" id="myCanvas">canvas>
shareHb() {
wx.showLoading({
title: '海报生成中'
})
let self = this;
setTimeout(() => {
wx.canvasToTempFilePath({
fileType: 'jpg',
//quality: 0.8,
canvasId: 'posterCanvas',
success: (res) => {
console.log(res);
self.setData({
hb: true,
hbUrl: res.tempFilePath,
})
wx.hideLoading()
},
fail(res) {
console.log(res);
}
}, this)
}, 1500);
},
getCanvas() {
let self = this;
let {
mainImg,
canvasTitle,
QrCode
} = {
mainImg: "http://127.0.0.1/10796/Uploads/images/2022/03/20/1647772040_goods_img.jpg",
canvasTitle: "嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻",
QrCode: "http://127.0.0.1/10796/qrcode/goods_2.png"
}
//选取画板
let ctx = wx.createCanvasContext('posterCanvas');
ctx.clearRect(0, 0, 320, 450); //清空画板
ctx.setFillStyle('#fff')
ctx.fillRect(0, 0, 320, 450)
//调用draw()开始绘制
//写title 文字
ctx.setTextAlign('left');
ctx.setFillStyle('#333'); //文字颜色：默认黑色
ctx.setFontSize(14) //设置字体大小，默认10
let canvasTitleArray = canvasTitle.split("");
let firstTitle = ""; //第一行字
let secondTitle = ""; //第二行字
for (let i = 0; i < canvasTitleArray.length; i++) {
let element = canvasTitleArray[i];
let firstWidth = ctx.measureText(firstTitle).width;
//console.log(ctx.measureText(firstTitle).width);
if (firstWidth > 260) {
let secondWidth = ctx.measureText(secondTitle).width;
//第二行字数超过，变为...
if (secondWidth > 260) {
secondTitle += "...";
break;
} else {
secondTitle += element;
}
} else {
firstTitle += element;
}
}
//第一行文字
ctx.fillText(firstTitle, 20, 268, 280) //绘制文本
//第二行问题
if (secondTitle) {
ctx.fillText(secondTitle, 20, 290, 280) //绘制文本
}
//底部提示语句1
ctx.setTextBaseline("top");
ctx.setFillStyle('#333') //文字颜色：默认黑色
ctx.setTextAlign('left') //文字颜色：默认黑色
ctx.setFontSize(14) //设置字体大小，默认10
ctx.fillText("给您推荐", 30, 360, 280) //绘制文本
//底部提示语句2
ctx.setTextBaseline("top");
ctx.setFillStyle('#B8B8B8') //文字颜色：默认黑色
ctx.setTextAlign('left') //文字颜色：默认黑色
ctx.setFontSize(12) //设置字体大小，默认10
ctx.fillText("长按或扫描识别二维码", 30, 380, 280) //绘制文本
//生成主图
wx.getImageInfo({
src: mainImg, //服务器返回的图片地址
success: function (res) {
//console.log(res);
let h = res.height;
let w = res.width;
let setHeight = 280, //默认源图截取的区域
setWidth = 220; //默认源图截取的区域
if (w / h > 1.5) {
setHeight = h;
setWidth = parseInt(280 / 220 * h);
} else if (w / h < 1) {
setWidth = w;
setHeight = parseInt(220 / 280 * w);
} else {
setHeight = h;
setWidth = w;
};
console.log(setWidth, setHeight)
ctx.drawImage(res.path, 0, 0, setWidth, setHeight, 20, 20, 280, 220);
ctx.draw(true);
},
fail: function (res) {
//失败回调
self.posterFail();
}
});
//生成二维码
wx.getImageInfo({
src: QrCode, //服务器返回的图片地址
success: function (res) {
ctx.drawImage(res.path, 200, 320, 100, 100);
ctx.draw(true);
},
fail: function (res) {
//失败回调
self.posterFail();
}
});
},
saveImg2() {
//保存图片
wx.saveImageToPhotosAlbum({
filePath: this.data.hbUrl,
success: function (data) {
wx.showToast({
title: '已保存到相册',
icon: 'success',
duration: 2000
})
},
fail: function (err) {
console.log(err);
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
console.log("当初用户拒绝，再次发起授权")
self.secondGetPhoteAuthor();
} else {
wx.showToast({
title: '请截屏保存分享',
icon: 'none'
});
}
},
complete(res) {
wx.hideLoading();
console.log(res);
}
})
},
/**
* 二次弹窗获取 相册权限
*/
secondGetPhoteAuthor() {
let self = this;
wx.showModal({
title: '保存海报',
content: '需要你提供保存相册权限',
success: function (res) {
if (res.confirm) {
wx.openSetting({
success(settingdata) {
console.log(settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
console.log('获取 相册 权限成功，给出再次点击图片保存到相册的提示。');
this.saveImg2();
} else {
wx.hideLoading();
wx.showToast({
title: '保存失败',
icon: 'none',
});
console.log('获取 相册 权限失败，给出不给权限就无法正常使用的提示')
}
}
})
} else {
wx.hideLoading();
wx.showToast({
title: '保存失败',
icon: 'none',
});
}
}
});
},
免责申明：
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流！
2. 如有无法查看或链接失效，麻烦请报告联系管理员处理！
3. 本站无法保证资源或其时效性，恕不接受任何提问。
4. 在本站下载的源码严禁杜绝任何形式的正式商业用途，请去程序官方购买。 所有资料均来自于网络，版权归原创者所有！本站不提供任何保证，并不承担任何法律责任，如果对您的版权或者利益造成损害，请提供相应的资质证明，我们将于3个工作日内予以删除。
