小程序分享海报功能

本文主要是介绍小程序分享海报功能，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

小程序文档说是画布不更新了 但是还能用  所以我就把部分代码粘贴出来仅供参考

 <!-- 分享 -->
 <view class="share" hidden="{{share}}">
    <view class="share_top">
      <view></view>
      <view class="share_name">分享</view>
      <view class="close1" bindtap="bindclose1">
        <image src="../static/images/x1.png"></image>
      </view>
    </view>
    <view class="share_btn">
      <button open-type="share">
        <view>
          <view class="share_img">
            <image src="../static/images/fxhy.png"></image>
          </view>
          <view class="share_con">分享给好友</view>
        </view>
      </button>

      <view bindtap="bindshareposter">
        <view class="share_img">
          <image src="../static/images/schb.png"></image>
        </view>
        <view class="share_con">生成分享海报</view>
      </view>

    </view>
  </view>

  <!-- 海报 -->
  <view class="mark" hidden="{{hidden1}}" bindtap="bindmark"></view>
  <view class="poster" hidden="{{hidden1}}">
    <canvas canvas-id="shareCanvas" style="width:604rpx;height:940rpx"></canvas>
    <view class="preservation">
      <view class="p_btn" bindtap="bindcanvas">
        保存到相册
      </view>
    </view>
  </view>

/* 海报 */
.poster {
  width: 604rpx;
  position: fixed;
  left: 73rpx;
  top: 40rpx;
  height: 1090rpx;
  z-index: 101;
}

.preservation {
  width: 604rpx;
  background: #FFFFFF;
  opacity: 1;
  padding: 20rpx 30rpx 40rpx;
  box-sizing: border-box;
  border-radius: 0 0 8rpx 8rpx;
}

.p_btn {
  width: 524rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  font-size: 28rpx;
  color: #FFFFFF;
  background: #FFD03A;
  opacity: 1;
  border-radius: 45rpx;
}

.fx_img {
  width: 42rpx;
  height: 42rpx;
  flex-shrink: 0;
}
.fx_img image {
  width: 100%;
  height: 100%;
  display: block;
}

  bingshare(){
    this.setData({
      share:false
    })
  },
  bindclose1(){
    this.setData({
      share:true
    })
  },
    // 分享海报
    bindshareposter() {
      this.setData({
        hidden1: false,
        share: true
      })
      this.createQrCode()
    },
    bindmark() {
      this.setData({
        hidden1: true,
  
      })
    },
    // 获取二维码
    createQrCode() {
      const that = this;
      let qrcode = that.data.baseUrl + that.data.goodsdInfo.qrcode;
      let img = that.data.baseUrl + that.data.goodsdInfo.poster_image;
      
      let p1 = new Promise((resolve, reject) => {
        console.log(qrcode)
        wx.getImageInfo({
          src: qrcode,
          success(res) {
            console.log(res)

            resolve(res.path)
          },
          fail(res) {
            console.log(res)
          }
        })
      })
      let p2 = new Promise((resolve, reject) => {
        wx.getImageInfo({
          src: img,
          success(res) {
            console.log(res)
            resolve(res.path)
          },
          fail(res) {
            console.log(res)
          }
        })
      })
      Promise.all([p1, p2]).then((result) => {
        console.log(result)
        that.canvas(result[0], result[1])
        //['成功了', 'success']
      }).catch((error) => {
        console.log(error)
      })

    },
  
    // 画布
    canvas(qrcode, bgimg) {
      const ctx = wx.createCanvasContext('shareCanvas');
      var w = '';
      var h = '';
      var imgW = '';//大图宽
      var imgH = '';//大图高
      var shareImgW = '';//分享图片宽
      var shareImgH = '';//分享图片高
      var x = '';
      var y = '';
      var l = '';
      var t1 = '';
      var t2 = '';
      const that = this;
      wx.getSystemInfo({
        success: (res) => {
          console.log(res)
          w = res.windowWidth;
          h = res.windowHeight;
          imgW = w * 0.81;
          imgH = imgW / 0.94;
          shareImgW = w * 0.227;
          shareImgH = w * 0.227;
          x = imgW * 0.357;
          y = imgH + 15;
          l = imgW / 2;
          t1 = imgH + shareImgH + 30;
          t2 = imgH + shareImgH + 45;
          // let img = bgimg
          // let img1 = qrcode;
          // // ctx.setFillStyle('white')//填充白色
          // // ctx.fillRect(0, 0, 604, 1060);
          // // ctx.drawImage(img, 0, 0, 302, 320);
          // // ctx.drawImage(img1, 108, 335, 85, 85);
          // ctx.setFillStyle('white')//填充白色
          // ctx.fillRect(0, 0, 604, 1060);
          // ctx.drawImage(img, 0, 0, imgW, imgH);
          // ctx.drawImage(img1, x, y, shareImgW, shareImgH);
          // ctx.setTextAlign('center')//设置文字要垂直居中
          // ctx.setFillStyle('#666666')//字体颜色
          // ctx.setFontSize(10)//字体大小
          // ctx.fillText("扫描二维码", l,)//字体内容和位置
          // ctx.fillText("查看店铺详情", l, 455)//字体内容和位置
          // ctx.draw()
        },
      })
  
      let img = bgimg
      let img1 = qrcode;
      // ctx.setFillStyle('white')//填充白色
      // ctx.fillRect(0, 0, 604, 1060);
      // ctx.drawImage(img, 0, 0, 302, 320);
      // ctx.drawImage(img1, 108, 335, 85, 85);
      ctx.setFillStyle('white')//填充白色
      ctx.fillRect(0, 0, 604, 1060);
      ctx.drawImage(img, 0, 0, imgW, imgH);
      ctx.drawImage(img1, x, y, shareImgW, shareImgH);
  
      ctx.setTextAlign('center')//设置文字要垂直居中
      ctx.setFillStyle('#666666')//字体颜色
      ctx.setFontSize(10)//字体大小
      ctx.fillText("扫描二维码", l, t1)//字体内容和位置
      ctx.fillText("查看商品详情", l, t2)//字体内容和位置
      ctx.draw()
    },
    // 保存
    bindcanvas() {
      const that = this;
      wx.canvasToTempFilePath({
        canvasId: 'shareCanvas',
        success: function (res) {
          console.log(res)
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success(res) {
              $.toast('保存成功！', false)
              console.log(res)
              that.setData({
                hidden1: true
              })
            },
            fail(res) {
              console.log(res)
            }
          })
  
        }
      })
    },

这篇关于小程序分享海报功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！