小程序开发使用画布生成海报（vue）

    元旦将至，接到上级要求小程序生成元旦贺卡分享。（要求用户自主填写祝福语标题）

个人思路：选用元旦背景将用户填写内容画布生成。保存为图片海报
一下为代码:
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

小程序开发使用画布生成海报（vue）

猜你喜欢