uni-app 页面保存图片

在uni-app中，保存图片到本地存储通常涉及以下几个步骤：获取图片数据、使用Canvas绘制图片、最后将Canvas内容导出为图片并保存到本地。以下是一个具体的代码案例，展示了如何在uni-app中实现页面保存图片的功能。

1. 获取图片数据

首先，假设你有一个图片URL，或者你可以从某个组件（如<image>）中获取图片数据。这里我们假设有一个图片URL。

2. 使用Canvas绘制图片

接下来，我们使用Canvas绘制这张图片。在uni-app中，可以使用<canvas>组件和相应的API来实现。

<template>
  <view>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
    <button @click="saveImage">保存图片</button>
  </view>
</template>

<script>
export default {
  methods: {
    drawImage() {
      const ctx = uni.createCanvasContext('myCanvas');
      const imgUrl = 'https://example.com/path/to/your/image.jpg'; // 替换为你的图片URL
      
      uni.getImageInfo({
        src: imgUrl,
        success: (res) => {
          ctx.drawImage(res.path, 0, 0, 300, 300); // 根据需要调整尺寸
          ctx.draw(false, () => {
            console.log('图片绘制完成');
          });
        },
        fail: (err) => {
          console.error('获取图片信息失败', err);
        }
      });
    },
    saveImage() {
      uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
          const tempFilePath = res.tempFilePath;
          uni.saveImageToPhotosAlbum({
            filePath: tempFilePath,
            success: () => {
              uni.showToast({
                title: '图片保存成功',
                icon: 'success'
              });
            },
            fail: (err) => {
              console.error('保存图片失败', err);
            }
          });
        },
        fail: (err) => {
          console.error('canvas转临时文件失败', err);
        }
      }, this);
    }
  },
  onLoad() {
    this.drawImage(); // 页面加载时绘制图片
  }
}
</script>

3. 保存图片到相册

在上面的代码中，canvasToTempFilePath方法用于将Canvas内容转换为临时文件路径，然后saveImageToPhotosAlbum方法用于将该临时文件保存到本地相册。

注意事项

• 确保你的应用有保存图片到相册的权限，这在Android和iOS上可能需要用户手动授权。
• 图片URL应该是有效的，且可以访问。
• 根据实际需求调整Canvas的大小和图片绘制的坐标。

以上代码提供了一个基本的框架，你可以根据实际需求进行扩展和优化。