小程序分享海报功能

2022-03-19 11:32:22 阅读：158 来源： 互联网

标签：海报 console log img 程序 ctx res var 分享

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

 <!-- 分享 -->
 <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)
            }
          })
  
        }
      })
    },

标签：海报,console,log,img,程序,ctx,res,var,分享
来源： https://blog.csdn.net/Acitylion/article/details/123591230

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

小程序分享海报功能