vue3uniapp点击保存图片

在Vue3和UniApp中，如果你想让用户点击按钮保存图片，你可以使用`uni.getImageInfo`和`uni.saveImageToPhotosAlbum`这两个API。首先，你需要获取到图片的URL或本地临时文件路径，然后触发保存操作。

下面是一个简单的示例代码：

<template>
  <button @click="saveImage">保存图片</button>
  <!-- 图片组件，假设有一个名为"img-preview"的元素 -->
  <image :src="imageUrl" ref="imgPreview"></image>
</template>

<script setup>
import { ref } from 'vue';
import { getImageInfo } from '@dcloudio/uni-app';

let imageUrl = ref ""; // 存储图片URL

// 当图片加载完成时，获取其信息并设置到imageUrl
const handleImgLoad = async () => {
  const result = await getImageInfo({ src: this.$refs.imgPreview.src });
  imageUrl.value = result.tempFilePath;
};

// 点击保存图片
const saveImage = async () => {
  try {
    await uni.saveImageToPhotosAlbum({
      filePath: imageUrl.value,
      success: (res) => {
        console.log('图片已保存至相册', res);
      },
      fail: (err) => {
        console.error('保存图片失败', err);
      }
    });
  } catch (e) {
    console.error('保存图片时出错', e);
  }
};

// 图片加载完成后调用handleImgLoad函数
onMounted(() => {
  this.$refs.imgPreview.onload = handleImgLoad;
})
</script>

在这个例子中，当用户点击"保存图片"按钮时，会调用`saveImageToPhotosAlbum`方法将图片保存到手机相册。确保在实际项目中处理可能出现的各种错误情况。