canvas保存图片

需求：上面有几个按钮，其中有一个切换是图片

用v-if会导致图片加载慢

实现方法：

一进来就加载，通过监听元素显示，用于控制canvas的宽高，从而达到隐藏的效果

组件dowolad.vue

<template>
    <view style="margin-top: 20rpx;">
        <canvas canvas-id="myCanvas" :style="scaleObj"></canvas>
        <button :loading="loading" :disabled="loading" @click="saveImg" class="confirmBnt" v-if="!weixin && show">保存二维码</button>
    </view>
  </template>
  
  <script>
  export default {
    props: ['show'],
    data() {
      return {
    show: true,
        canvasId: 'myCanvas',
        imagePath: '',
        canvaseAttr:{
          width: 0,
          height: 0,
        },
        scaleObj:{},
        loading: false,
        weixin: false
      };
    },
    mounted(){
      this.weixin = this.$wechat.isWeixin();
      this.init();
    },
    watch:{
      show:{
        handler(newData, oldData){
          let scale = {
            width: 0,
            height: 0,
          }
          if(newData){
            scale.width = this.canvaseAttr.width+'px';
            scale.height = this.canvaseAttr.height+'px';
          }
          this.scaleObj = scale;
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      init(){
        this.getImageInfo();
      },
      getImageInfo() {
        let that = this;
        uni.getSystemInfo({
          success: (window) => {
            const screenWidth = window.windowWidth;
            uni.getImageInfo({
              src: 'https://media.sammu.top/pay_bank_img.png',
              success: (res) => {
                let scale = screenWidth/res.width;
                let height = res.height*scale;
                that.canvaseAttr = {
                  width: screenWidth,
                  height: height,
                }
                that.imagePath = res.path;
                that.drawCanvas();
              },
              fail: (err) => {
                console.log(err);
              }
            });
          },
        });
        
      },
      drawCanvas() {
        this.$nextTick(()=>{
          const ctx = uni.createCanvasContext('myCanvas', this);
          ctx.drawImage(this.imagePath, 0, 0, this.canvaseAttr.width, this.canvaseAttr.height);
          ctx.draw();
        })
      },
      saveImg(){
        const ctx = uni.createCanvasContext(this.canvasId, this);
        let that = this;
        that.loading = true;
        // 绘制完成  
        ctx.draw(true, function () {
          uni.canvasToTempFilePath({
            canvasId: that.canvasId,
            success: (res) => {
              // #ifdef H5
              that.saveH5Canvas(res)
              // #endif
              // #ifdef APP
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: () => {
                  uni.showToast({
                    title: '保存成功',
                    icon: 'none'
                  })
                  that.loading = false;
  uni.hideLoading();
                },
                fail: () => {
                  uni.showToast({
                    title: '保存失败',
                    icon: 'none'
                  })
                  that.loading = false;
  uni.hideLoading();
                }
              });
              // #endif
        
            },
            fail: (err) => {
              that.loading = false;
              console.log(err, "错误信息");
            }
          });
        
        })
      },
      saveH5Canvas(res) {
        let that = this;
        try {
          // 在 h5 中，res.tempFilePath 返回的是 base64 类型要处理，通过 a 标签的形式下载
          var arr = res.tempFilePath.split(',');
          var bytes = atob(arr[1]);
          let ab = new ArrayBuffer(bytes.length);
          let ia = new Uint8Array(ab);
          for (let i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
          }
          var blob = new Blob([ab], {
            type: 'application/octet-stream'
          });
          var url = URL.createObjectURL(blob);
          var a = document.createElement('a');
          a.href = url;
          a.download = new Date().valueOf() + ".png";
          var e = document.createEvent('MouseEvents');
          e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
          a.dispatchEvent(e);
          URL.revokeObjectURL(url);
          uni.showToast({
title: '保存成功',
icon: 'none'
})
          that.loading = false;
  uni.hideLoading();
        } catch (e) {
          uni.showToast({
title: '保存失败',
icon: 'none'
})
          that.loading = false;
  uni.hideLoading();
        }    
      },
    },
  }
  </script>
  <style lang="scss" scoped>
  .confirmBnt{
position: fixed;
bottom: 20rpx;
width: calc(100% - 20rpx);
left: 50%;
transform: translateX(-50%);
background: var(--view-theme);
border-radius: 24rpx;
height: 108rpx;
line-height: 108rpx;
font-size: 40rpx;
font-weight: 700;
text-align: center;
color: #fff;
}
  </style>
  

调用

<dowload ref="dowloadRef" :show="active == 1"></dowload>

原文地址：https://blog.csdn.net/weixin_45638909/article/details/144444214

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！