web-base-h5/components/postShare.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: kBank
 * @Date: 2022-12-13 15:02:12
-->
<template>
  <view>
    <!-- 海报 -->
    <view class="popup"
          v-show="popShow">
      <view class="all"
            id="qrCodeDiv"
            ref="qrCodeDiv">
        <canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }"
                canvas-id="myCanvas"
                id="myCanvas"></canvas>
      </view>
      <view class="btn"
            @click="savePosterPath()">保存到手机</view>

    </view>
    <!-- 模态框 -->
    <view class="mask"
          v-show="popShow"
          @tap="popShow = false"></view>
    <!-- 底部弹框 -->
    <u-action-sheet :actions="list"
                    :closeOnClickOverlay="true"
                    @close="closeIsShow"
                    @select="selectClick"
                    :show="isShow"></u-action-sheet>
  </view>
</template>

<script>
import { qrCode } from '@/config/goods.js'
export default {
  data() {
    return {
      bgImg:
        'https://sea-buck.oss-cn-beijing.aliyuncs.com/test/resources/share.jpg',
      postImg: '',
      goodImg: '',
      canvasW: 320, // 画布宽
      canvasH: 480, // 画布高
      popShow: false,
      isShow: false,
      list: [
        {
          name: '生成海报',
        },
      ],
    }
  },
  methods: {
    selectClick() {
      this.popShow = true
      this.isShow = false
    },
    closeIsShow() {
      this.isShow = false
    },
    // 点击分享
    openImg(item) {
      this.isShow = true
      this.toShare(item)
    },
    toShare(item) {
      let pkId = item.pkId
      this.goodImg = item.cover1
      qrCode({
        codeType: 1,
        waresId: pkId,
      }).then((res) => {
        this.postImg = res.data
        this.toCanvas()
        // this.popShow = true
      })
    },
    async toCanvas() {
      // 背景图片
      let imgBg = await this.storyImg(this.bgImg)
      // 商品图片
      let imggoodList = await this.storyImg(this.goodImg)
      // 二维码
      let imgPost = await this.storyImg(this.postImg)
      setTimeout(() => {
        var ctx = uni.createCanvasContext('myCanvas', this)
        ctx.drawImage(imgBg, 0, 0, this.canvasW, this.canvasH) //插入图片
        ctx.drawImage(imggoodList, 95, 175, 130, 130)
        ctx.drawImage(imgPost, 239, 392, 65, 65)
        ctx.draw(true, (ret) => {})
      }, 100)
    },
    //获取图片缓存地址
    storyImg(img) {
      return new Promise((reslove, reject) => {
        uni.getImageInfo({
          src: img,
          success: (res) => {
            reslove(res.path)
          },
        })
      })
    },
    // 保存相册
    savePosterPath() {
      let that = this
      uni.getSetting({
        success(res) {
          console.log('res', res)
          if (!res.authSetting['scope.writePhotosAlbum']) {
            uni.authorize({
              scope: 'scope.writePhotosAlbum',
              success() {
                // 同意授权
                that.saveLocal()
              },
              fail() {
                console.log('拒绝过授权')
                uni.showModal({
                  title: '授权提示',
                  content: '是否允许获取保存相册权限',
                  success: (res) => {
                    if (res.confirm) {
                      // 点击确定，则调用相册授权
                      uni.openSetting({
                        success(set) {
                          if (set.authSetting['scope.writePhotosAlbum']) {
                            uni.showToast({
                              title: '授权成功',
                            })
                          } else {
                            uni.showToast({
                              title: '请确定已打开保存权限',
                              icon: 'none',
                            })
                          }
                        },
                      })
                    }
                  },
                })
              },
            })
          } else {
            // 受过全
            that.saveLocal()
          }
        },
      })
    },
    saveLocal() {
      console.log('d')
      // canvas转图片
      uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: function (res) {
          console.log('res', res)
          // // 保存相册
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function () {
              console.log('save success')
              uni.showToast({
                title: '已保存在本地相册',
                icon: 'none',
              })
            },
            fail: function () {
              uni.showToast({
                title: '保存失败',
                icon: 'none',
              })
            },
          })
        },
        fail: function (err) {
          console.log('err', err)
        },
      },this)
    },
  },
}
</script>

<style lang="scss" scoped>
.popup {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btn {
  width: 320px;
  padding: 20rpx 0;
  text-align: center;
  margin-top: 60rpx;
  background: #fbb61e;
  color: #fff;
}
.toSave {
  color: #fff;
  text-align: center;
  font-size: 30rpx;
  margin-top: 60rpx;
}
.all {
  width: 320px;
  height: 480px;
}
.bgImg {
  position: relative;
  width: 100%;
  height: 100%;
}
.goodsImg {
  width: 260rpx;
  height: 260rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.qrImg {
  width: 120rpx;
  height: 120rpx;
  position: absolute;
  bottom: 96rpx;
  right: 62rpx;
  border-radius: 50%;
}
.mask {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  height: 100vh;
  background: rgba(0, 0, 0, 80%);
  overflow: hidden;
}
</style>