vue h5 保存图片到手机本地相册的方法

在Vue中保存图片到手机本地相册，可以使用html2canvas库结合FileSaver.js来实现。以下是实现这一功能的步骤和示例代码：

1. 安装html2canvas和file-saver:

npm install html2canvas file-saver

2. 在Vue组件中引入并使用这些库：

import html2canvas from 'html2canvas';
import { saveAs } from 'file-saver';

3. 创建一个方法来处理保存图片的逻辑：

methods: {
  saveImage() {
    const element = document.getElementById('image-wrapper'); // 假设你要保存的内容在这个元素内
    html2canvas(element).then((canvas) => {
      let dataUrl = canvas.toDataURL('image/png');
      let blob = this.dataURLtoBlob(dataUrl);
      saveAs(blob, 'image-name.png');
    });
  },
  dataURLtoBlob(dataurl) {
    let arr = dataurl.split(',');
    let mime = arr[0].match(/:(.*?);/)[1];
    let bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
  }
}

4. 在模板中添加一个按钮来触发保存图片的方法：

<button @click="saveImage">保存图片到相册</button>

确保html2canvas和FileSaver.js的版本与你的项目兼容。这个例子假设你要保存的是页面中某个元素的内容。你可以根据实际需求调整选择的元素。