uni-app H5图片压缩上传以及旋转

在处理uni-app中的H5图片压缩上传以及旋转功能时，可以利用HTML5的Canvas API来实现。下面是一个简要的代码示例，展示了如何压缩图片、旋转图片并上传到服务器。

1. 引入必要的库

在pages/index/index.vue中，引入必要的库（如果需要，可以使用uni.chooseImage来选择图片）。

<template>
  <view>
    <button @click="chooseImage">选择图片</button>
    <canvas canvas-id="myCanvas" style="display: none;"></canvas>
    <image :src="compressedImageSrc" v-if="compressedImageSrc"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      compressedImageSrc: ''
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const filePath = res.tempFilePaths[0];
          this.compressAndRotateImage(filePath, 90).then((base64) => {
            this.compressedImageSrc = base64;
            // 此处可以添加上传逻辑
            this.uploadImage(base64);
          });
        }
      });
    },
    compressAndRotateImage(filePath, angle) {
      return new Promise((resolve, reject) => {
        uni.getImageInfo({
          src: filePath,
          success: (imageInfo) => {
            const ctx = uni.createCanvasContext('myCanvas', this);
            const { width, height } = imageInfo;
            const canvasWidth = width / 2; // 压缩比例，这里简单设置为原宽高的一半
            const canvasHeight = height / 2;
            ctx.drawImage(filePath, 0, 0, canvasWidth, canvasHeight, 0, 0, width, height);
            ctx.rotate((angle * Math.PI) / 180);
            ctx.draw(false, () => {
              uni.canvasToTempFilePath({
                canvasId: 'myCanvas',
                destWidth: width,
                destHeight: height,
                success: (res) => {
                  uni.getFileSystemManager().readFile({
                    filePath: res.tempFilePath,
                    encoding: 'base64',
                    success: (data) => {
                      resolve(`data:image/png;base64,${data.data}`);
                    },
                    fail: reject
                  });
                },
                fail: reject
              });
            });
          },
          fail: reject
        });
      });
    },
    uploadImage(base64) {
      // 使用uni.uploadFile或其他方法上传base64编码的图片到服务器
    }
  }
};
</script>

2. 解释代码

• chooseImage方法：调用uni.chooseImage选择图片，并调用compressAndRotateImage方法进行压缩和旋转。
• compressAndRotateImage方法：获取图片信息，创建Canvas上下文，绘制图片，旋转Canvas，然后导出压缩并旋转后的图片为base64编码。
• uploadImage方法：这里仅是一个占位符，你可以使用uni.uploadFile或其他方法将base64编码的图片上传到服务器。

注意：

• 上述代码示例仅展示了核心逻辑，实际应用中可能需要根据具体需求调整。
• 图片压缩比例可以根据需要调整，这里简单设置为原宽高的一半。
• 旋转角度可以根据需求调整，示例中旋转了90度。