<template>
  <view class="compress">
    <canvas :style="{ width: canvasSize.width, height: canvasSize.height }" canvas-id="myCanvas"></canvas>
  </view>
</template>

<script>
import { base64ToPath } from './index.js';
export default {
  data() {
    return {
      pic: '',
      canvasSize: {
        width: 0,
        height: 0
      }
    };
  },
  methods: {
    dataURLtoBlob(dataurl) {
      let arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    // 压缩
    compress(params) {
      return new Promise(async (resolve, reject) => {
        let info = await this.getImageInfo(params.src)
          .then((info) => info)
          .catch((err) => err);

        if (!info) {
          reject('获取图片信息异常');
          return;
        }

        const maxSize = params.maxSize || 1080;

        let { width, height } = info;

        // 原图尺寸低于10则返回原图
        if (width < 10 || height < 10) {
          resolve(params.src);
          return;
        }

        if (width > maxSize || height > maxSize) {
          if (width > height) {
            height = Math.floor(height / (width / maxSize));
            width = maxSize;
          } else {
            width = Math.floor(width / (height / maxSize));
            height = maxSize;
          }
        }

        this.canvasSize = {
          width: `${width}rpx`,
          height: `${height}rpx`
        };

        this.$nextTick(() => {
          setTimeout(() => {
            const ctx = uni.createCanvasContext('myCanvas', this);
            ctx.drawImage(info.path, 0, 0, uni.upx2px(width), uni.upx2px(height));
            ctx.draw(false, () => {
              uni.canvasToTempFilePath(
                {
                  x: 0,
                  y: 0,
                  width: uni.upx2px(width),
                  height: uni.upx2px(height),
                  destWidth: width,
                  destHeight: height,
                  canvasId: 'myCanvas',
                  fileType: params.fileType || 'jpg',
                  quality: params.quality || 0.9,
                  success: (res) => {
                    // 在H5平台下，tempFilePath 为 base64
                    // #ifdef H5
                    base64ToPath(res.tempFilePath)
                      .then((path) => {
                        resolve(path);
                      })
                      .catch((error) => {
                        console.error(error);
                        reject(error);
                      });
                    // #endif
                    // #ifndef H5
                    resolve(res.tempFilePath);
                    // #endif
                  },
                  fail: (err) => {
                    reject(err);
                  }
                },
                this
              );
            });
          }, 500);
        });
      });
    },
    // 获取图片信息
    getImageInfo(src) {
      return new Promise(function (resolve, reject) {
        uni.getImageInfo({
          src,
          success: (info) => {
            resolve(info);
          },
          fail: () => {
            reject();
          }
        });
      });
    }
  }
};
</script>

<style>
.compress {
  position: fixed;
  width: 12px;
  height: 12px;
  overflow: hidden;
  top: -99999px;
  left: 0;
}
</style>
