微信小程序中生成海报并保存相册

<!-- 分享生成海报弹框 -->
<view class="sharebig" hidden="{{sharehide}}">
  <view class="share">
    <view class="sharetit">
      <text>分享</text>
      <image src="../../../../imgs/cuowu.png" bindtap="colseshare"></image>
    </view>
    <view class="sharebot">
      <view class="sharebotcon sharebotlef">
        <button open-type="share" class="sharebtn">
          <image src="../../../../imgs/weixin.png"></image>
          <text>好友及微信群</text>
        </button>
      </view>
      <view class="sharebotcon" bindtap="haibao">
        <button class="sharebtn" bindtap="getPoster" data-image='{{list.image}}'>
          <image src="../../../../imgs/haibao.png"></image>
          <text>生成专属海报</text>
        </button>
      </view>
    </view>
  </view>
</view>
<view class="share">
  <view style="position:fixed;top:0px;left:-2000px">
    <canvas canvas-id="app"></canvas>
  </view>
</view>
<!-- 生成专属海报 -->
<view class="sharebig" hidden="{{sharehaibao}}">
  <view class="share">
    <view class="sharetitsheng">
      <text>生成专属海报</text>
      <image src="../../../../imgs/cuowu.png" bindtap="colseshare"></image>
    </view>
    <image src="{{src}}" mode="widthFix" class="sharehaibao"></image>
    <view class="haibaobot">
      <button bindtap="saveShareImg">保存图片</button>
      <text>将活动图片分享给好友吧</text>
    </view>
  </view>
</view>

--------------------------------------------

 // 获取二维码
    getsrccode({
      token: app.userinfo.token,
      pid: this.data.pid,
      share_mid: app.userinfo.mid
    }).then(res => {
      if (res.data.code == 200) {
        this.setData({
          src2: res.data.src_qcode
        })
      }
    })

// 保存图片到手机相册
  saveShareImg: function (e) {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 1030,
      height: 1030,
      destWidth: 0,
      destHeight: 0,
      canvasId: 'app',
      success: function (res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(result) {
            wx.showToast({
              title: '图片保存成功',
              icon: 'success',
              duration: 2000
            })
          }
        })
      }
    })
  },
  // 转发好友及微信群
  onShareAppMessage: function () {
    var images = this.data.images;
    var pid = this.data.pid;
    return {
      title: this.data.title,
      path: '../../../../page/subcontract/pages/luckDetail/luckDetail?pid=' + this.data.pid + '&share_mid=' + app.userinfo.mid,
      imageUrl: images,
      success: function (res) {
        // 转发成功
        console.log(res)
      },
      fail: function (res) {
        console.log(res)
        // 转发失败
      }
    }
  },
  // 生成海报
  createPoster: function (a, b) {
    var that = this;
    let steps = [];
    steps.push({
      type: 'img',
      x: 0,
      y: 0,
      width: 343,
      height: 343,
      destWidth: 100,
      destHeight: 100,
      src: 'https://www.tsymt.com/wxshare.png'
    }, {
      type: 'img',
      x: 10,
      y: 10,
      width: 322,
      height: 151,
      src: a
    }, {
      type: 'img',
      x: 100,
      y: 180,
      width: 145,
      height: 145,
      src: b
    })
    let poster = new Poster({
      width: 350,
      height: 400,
      scale: 3,
      canvasId: 'app'
    })
    poster.draw(steps).then((tmpPath) => {
      that.setData({
        tempath: tmpPath
      })
    })
  },
  // 点击生成海报
  getPoster: function (a) {
    var that = this;
    wx.getImageInfo({
      src: that.data.tempath,
      success: function (res) {
        that.setData({
          src: that.data.tempath
        })
      }
    })
  }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值