uni-app 插件需求 预览线上图片 支持旋转 缩放 切换 保存等操作

针对您的uni-app插件需求，以下是一个基于uni-app实现的图片预览组件示例，该组件支持图片的旋转、缩放、切换和保存操作。为了实现这些功能，我们可以利用uni.previewImage API进行基础预览，并结合Canvas进行图片的旋转和缩放处理，最后使用uni.saveImageToPhotosAlbum保存图片。

1. 创建图片预览页面

首先，创建一个新的页面用于图片预览，命名为PreviewImage.vue：

<template>
  <view class="container">
    <canvas canvas-id="imageCanvas" style="width: 100%; height: 100%;"></canvas>
    <button @click="rotateImage">Rotate</button>
    <button @click="zoomIn">Zoom In</button>
    <button @click="zoomOut">Zoom Out</button>
    <button @click="saveImage">Save</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      context: null,
      scale: 1,
      rotateAngle: 0,
      imageSrc: ''
    };
  },
  onLoad(options) {
    this.imageSrc = options.url;
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      const query = uni.createSelectorQuery().in(this);
      query.select('#imageCanvas').fields({ node: true, size: true }).exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
        this.context = ctx;
        this.drawImage();
      });
    },
    drawImage() {
      const ctx = this.context;
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
      ctx.save();
      ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
      ctx.rotate(this.rotateAngle * Math.PI / 180);
      ctx.scale(this.scale, this.scale);
      ctx.drawImage(this.imageSrc, -this.imageSrc.width / 2, -this.imageSrc.height / 2);
      ctx.restore();
    },
    rotateImage() {
      this.rotateAngle += 90;
      this.drawImage();
    },
    zoomIn() {
      this.scale *= 1.1;
      this.drawImage();
    },
    zoomOut() {
      this.scale /= 1.1;
      this.drawImage();
    },
    saveImage() {
      uni.canvasToTempFilePath({
        canvasId: 'imageCanvas',
        success: (res) => {
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              uni.showToast({ title: 'Image saved', icon: 'success' });
            },
            fail: (err) => {
              console.error('Failed to save image', err);
            }
          });
        },
        fail: (err) => {
          console.error('Failed to convert canvas to image', err);
        }
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  margin: 10px;
}
</style>

2. 调用预览页面

在主页面或其他页面中，通过uni.navigateTo调用预览页面，并传递图片URL：

uni.navigateTo({
  url: `/pages/PreviewImage/PreviewImage?url=${encodeURIComponent(imageUrl)}`
});

以上代码提供了一个基础的图片预览、旋转、缩放和保存功能的实现。根据实际需求，您可能需要对代码进行优化和扩展，例如处理图片加载错误、增强用户体验等。