微信小程序canvas分享海报功能

微信小程序canvas分享海报，包含拒绝授权后重新打开授权设置。

这篇文章完善了第一次拒绝授权后再次点击可以打开授权设置，希望可以帮助到爱学习的道友

这里是效果图，图片可以百度上找。

话不多说，直接上代码

最重要的一点，千万不要忘记在json文件里面注册组件和wxml里面引用组件

wxml

<button class='btn' catchtap='createPoster' >生成海报</button>
<my-poster id="getPoster" types="{{type}}" isflag="{{isflag}}" title="{{goods_title}}" bigImg="{{share.img}}" qrcode="{{share.rcode}}" >
</my-poster> 

js

data:{ isflag: false // 海报模态框 }
// 生成海报
 createPoster:function(){
 this.setData({
 isflag: true
 })
 this.selectComponent('#getPoster').getAvaterInfo();
 },

组件wxml

<view hidden="{{!isflag}}" catchtouchmove="return" class="con-poster" bindtap='closePoster'>
 <!-- 模态框 -->
 <view class='modialog'>
 <view class='canvas-box' id='canvas-container'>
 <canvas canvas-id="myCanvas" style="width:100%;height:100%;"/>
 </view>
 </view>
 <!-- 保存图片按钮 -->
 <view class='save-img' catchtap='saveBtn'>保存图片</view>
</view>

组件wxss

.con-poster{
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.5);
 position: fixed;
 top: 0;
 left: 0;
 z-index: 999;
 }
 .modialog{
 width: 660rpx;
 height: 750rpx;
 margin: 100rpx auto 0;
 }
 .canvas-box{
 width: 660rpx;
 height: 750rpx;
 background: #fff;
 }
.save-img{
 width: 660rpx;
 height: 100rpx;
 margin: 30rpx auto 0;
 font-size: 32rpx;
 display: flex;
 justify-content: center;
 align-items: center;
 color: #fff;
 background:linear-gradient(90deg,rgba(56,219,248,1),rgba(81,171,255,1));
}

组件js

properties: {
 isflag:{ // 控制组件开关
 type: Boolean,
 value: true
 }
 bigImg:{ // 大图
 type: String,
 value: ''
 },
 qrcode:{ // 二维码
 type: String,
 value: ''
 },
 title:{ // 标题
 type: String,
 value: '大幅度开发'
 }
}

data: {
 imgHeight: 0
},

methods: {
 //关闭海报
 closePoster: function () {
 this.setData({
 isflag: false
 })
 },

 // 提示框
 toast: function(msg,callback){
 wx.showToast({
 title: msg,
 icon: 'none',
 success(){
  callback && (setTimeout(function(){
  callback()
  },1500))
 }
 })
 },

 //下载产品大图
 getAvaterInfo: function () {
 wx.showLoading({
 title: '生成中...',
 mask: true
 });
 var that = this;
 that.setData({
 isflag: true
 })
 var productImage = that.data.bigImg;
 if (productImage) {
 wx.downloadFile({
  url: productImage,
  success: function (res) {
  wx.hideLoading();
  if (res.statusCode === 200) {
  var productSrc = res.tempFilePath;
  that.calculateImg(productSrc, function (data) {
  that.getQrCode(productSrc, data);
  })
  } else {
  that.toast('产品图片下载失败！', () =>{
  var productSrc = "";
  that.getQrCode(productSrc);
  })
  }
  },
  fail: function (err) {
  wx.hideLoading();
  that.toast('请求失败，网络错误', () => {
  that.closePoster()
  })
  }
 })
 } else {
 wx.hideLoading();
 var productSrc = "";
 that.getQrCode(productSrc);
 }
 },

 //下载二维码
 getQrCode: function (productSrc, imgInfo = "") {
 wx.showLoading({
 title: '生成中...',
 mask: true,
 });
 var that = this;
 var productCode = that.data.qrcode;
 if (productCode) {
 wx.downloadFile({
  url: productCode,
  success: function (res) {
  wx.hideLoading();
  if (res.statusCode === 200) {
  var codeSrc = res.tempFilePath;
  that.sharePosteCanvas(productSrc, codeSrc, imgInfo);
  } else {
  that.toast('二维码下载失败！', () => {
  var codeSrc = "";
  that.sharePosteCanvas(productSrc, codeSrc, imgInfo);
  })
  }
  },
  fail: function () {
  wx.hideLoading();
  that.toast('请求失败，网络错误', () => {
  that.closePoster()
  })
  }
 })
 } else {
 wx.hideLoading();
 var codeSrc = "";
 that.sharePosteCanvas(productSrc, codeSrc);
 }
 },

 //canvas绘制分享海报
 sharePosteCanvas: function (avaterSrc, codeSrc, imgInfo){
 wx.showLoading({
 title: '生成中...',
 mask: true,
 })
 var that = this;
 const ctx = wx.createCanvasContext('myCanvas', that);
 var width = "";
 const query = wx.createSelectorQuery().in(this);
 query.select('#canvas-container').boundingClientRect(function (rect) {
 var width = rect.width;
 var height = rect.height;
 var left = rect.left;
 ctx.setFillStyle('#fff');
 ctx.fillRect(0, 0, width, height);

 //海报大图
 if (avaterSrc) {
  if (imgInfo) {
  var imgheght = parseFloat(imgInfo);
  }
  ctx.drawImage(avaterSrc, 0, 0, width, imgheght ? imgheght : width);
  ctx.setFontSize(14);
  ctx.setFillStyle('#fff');
  ctx.setTextAlign('left');
 }

 //海报标题
 if (that.data.title) {
  const CONTENT_ROW_LENGTH = 22; // 正文 单行显示字符长度
  let [contentLeng, contentArray, contentRows] = that.textByteLength((that.data.title).substr(0, 40), CONTENT_ROW_LENGTH);
  ctx.setTextAlign('left');
  ctx.setFillStyle('#000');
  ctx.setFontSize(15);
  let contentHh = 22 * 1;
  for (let m = 0; m < contentArray.length; m++) {
  ctx.fillText(contentArray[m], 15, imgheght + 35 + contentHh * m);
  }
 }

 // 绘制二维码
 if (codeSrc) {
  ctx.drawImage(codeSrc, left + 215, imgheght + 20, width / 4, width / 4)
  ctx.setFontSize(10);
  ctx.setFillStyle('#000');
 }
 }).exec()
 setTimeout(function () {
 ctx.draw();
 wx.hideLoading();
 }, 1000)
 },

 // 封装每行显示的文本字数
 textByteLength(text, num) { // text为传入的文本 num为单行显示的字节长度
 let strLength = 0;
 let rows = 1;
 let str = 0;
 let arr = [];
 for (let j = 0; j < text.length; j++) {
 if (text.charCodeAt(j) > 255) {
  strLength += 2;
  if (strLength > rows * num) {
  strLength++;
  arr.push(text.slice(str, j));
  str = j;

  rows++;
  }
 } else {
  strLength++;
  if (strLength > rows * num) {
  arr.push(text.slice(str, j));
  str = j;
  rows++;
  }
 }
 }
 arr.push(text.slice(str, text.length));
 return [strLength, arr, rows] // [处理文字的总字节长度，每行显示内容的数组，行数]
 },

 //计算图片尺寸
 calculateImg: function (src, cb) {
 var that = this;
 wx.getSystemInfo({
 success(res2) {
  var imgHeight = (res2.windowWidth * 0.65) + 130;
  that.setData({
  imgHeight: imgHeight
  })
  cb(imgHeight - 130);
 }
 })
 },

 // 点击保存按钮
 saveBtn(){
 var _this = this
 wx.getSetting({
 success(res) {
  if (res.authSetting['scope.writePhotosAlbum']) { // 第一次授权，并且成功
  _this.saveShareImg();
  } else if (res.authSetting['scope.writePhotosAlbum'] === undefined) { // 未授权
  wx.authorize({
  scope: 'scope.writePhotosAlbum',
  success() {
  _this.saveShareImg();
  },
  fail() {
  _this.toast('您没有授权，无法保存到相册')
  }
  })
  } else { // 第一次授权失败，现在打开设置
  wx.showModal({
  title: '警告',
  content: '请打开授权，否则无法将图片保存在相册中！',
  success(result) {
  if (result.confirm) {
   wx.openSetting({
   success(settingResult) {
   if (settingResult.authSetting['scope.writePhotosAlbum']) {
   _this.saveShareImg();
   } else {
   _this.toast('您没有授权，无法保存到相册')
   }
   }
   })
  }
  }
  })
  }
 }
 })
 },

 // 保存到相册
 saveShareImg: function () {
 var that = this;
 wx.showLoading({
 title: '正在保存',
 mask: true,
 })
 setTimeout(function () {
 wx.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success: function (res) {
  var tempFilePath = res.tempFilePath;
  wx.saveImageToPhotosAlbum({
  filePath: tempFilePath,
  success() { // 保存
  wx.hideLoading()
  that.toast('图片保存成功', () =>{
   that.closePoster();
  })
  },
  fail: function (err) { // 取消保存
  wx.hideLoading()
  that.toast('保存失败')
  }
  })
  }
 }, that);
 }, 1000);
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。