元旦将至,接到上级要求小程序生成元旦贺卡分享。(要求用户自主填写祝福语标题)
个人思路:选用元旦背景将用户填写内容画布生成。保存为图片海报
一下为代码:
wxml:
<view @click=“formSubmit”>
生成贺卡
<!--
-->
<image :src=“imagePath” @click=“previewImage” class=‘shengcheng’>
<button class=‘baocun’ @click=‘baocun’>重新生成
js:
//生成画布
createNewImg() {
var that = this;
var context = wx.createCanvasContext(‘mycanvas’);
context.setFillStyle("#fff")
context.fillRect(0, 100, 375, 567)
var path = “https://always520.cn/images/ydbj2.png”;
//将模板图片绘制到canvas,在开发工具中drawImage()函数有问题,不显示图片
//不知道是什么原因,手机环境能正常显示
context.drawImage(that.mysrc, 0,100, 375,567);
//不知道是什么原因,手机环境能正常显示
context.save();
// 保存当前context的状态
//console.log(this.count, “a”, this.title)
//var title = this.title;
//绘制标题
context.setFontSize(24);
context.setFillStyle(’#333333’);
context.setTextAlign(‘center’);
context.fillText(this.title, 185, 260);
context.stroke();
//绘制祝福语
var text = this.count;
var chr = text.split("");
var temp = "";
var row = [];
for (var a = 0; a < chr.length; a++) {
if (context.measureText(temp).width < 300) {
temp += chr[a];
}
else {
a--; //这里添加了a-- 是为了防止字符丢失,效果图中有对比
row.push(temp);
temp = "";
}
}
row.push(temp);
console.log("a0", temp)
context.setFontSize(18);
context.setFillStyle('#333333');
context.setTextAlign('center');
for (var b = 0; b < row.length; b++) {
context.fillText(row[b], 195, 300 + b * 30);
}
context.stroke();
//绘制验证码背景
//context.drawImage(path3, 48, 390, 280, 84);
//绘制右下角扫码提示语
//context.drawImage(path5, 248, 578, 90, 25);
context.setFontSize(18);
context.setFillStyle('red');
context.setTextAlign('center');
context.fillText("长按保存或分享", 195, 440);
context.setFontSize(18);
context.setFillStyle('red');
context.setTextAlign('center');
context.fillText("长按识别二维码,快点来生", 195, 465);
context.setFontSize(18);
context.setFillStyle('red');
context.setTextAlign('center');
context.fillText("成自己独特的元旦贺卡吧!", 195, 485);
context.draw();
//将生成好的图片保存到本地,需要延迟一会,绘制期间耗时
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: (res) => {
var tempFilePath = res.tempFilePath;
that.imagePath = tempFilePath,
that.imglist.push(tempFilePath),
that.xs = false;
this.canvasHidden=true
},
fail(res) {
console.log(res);
}
});
}, 200)
//点击返回重新生成
baocun() {
var that = this;
that.maskHidden = true;
that.xs = true;
//保存图片
//wx.saveImageToPhotosAlbum({
// filePath: this.imagePath,
// success(res) {
// wx.showModal({
// content: ‘图片已保存到相册,赶紧晒一下吧~’,
// showCancel: false,
// confirmText: ‘好的’,
// confirmColor: ‘#333’,
// success: function (res) {
// if (res.confirm) {
// that.maskHidden = true
// }
// }, fail: function (res) {
// console.log(11111)
// }
// })
// }
//})
},
//预览
previewImage (e) {
wx.previewImage({
current: this.imglist[0], // 当前显示图片的http链接
urls: this.imglist // 需要预览的图片http链接列表
})
},
getInputText(inputText) {
console.log(inputText.detail.value)
},
wxss:
page{
height: 100%;
min-height: 100%;
}
.imagePathBox {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.shengcheng {
width: 80%;
height: 80%;
position: fixed;
top: 50rpx;
left: 50%;
margin-left: -40%;
z-index: 10;
}
.baocun {
display: block;
width: 80%;
height: 80rpx;
padding: 0;
line-height: 80rpx;
text-align: center;
position: fixed;
bottom: 50rpx;
left: 10%;
background: #ff6f3f;
color: #fff;
font-size: 32rpx;
border-radius: 44rpx;
}
button[class=“baocun”]::after {
border: 0;
}
借鉴博客链接
https://www.cnblogs.com/zzgyq/p/8882995.html