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

在Vue.js中，保存H5页面的图片到手机本地相册，通常需要借助浏览器提供的File API以及Blob或URL.createObjectURL等技术。以下是一个简单的步骤示例：

1. 用户点击下载按钮时，首先获取图片元素的src属性或data-url属性，假设它是个blob对象或者base64编码的字符串。

const imgElement = document.querySelector('img');
const imgBlob = imgElement.src ? URL.parse(imgElement.src).blob : dataURLtoBlob(imgElement.dataset.url);

这里`dataURLtoBlob`是一个转换函数，用于将base64数据转为Blob对象，以便后续操作。

2. 创建一个a标签，并设置其href属性为临时文件URL：

const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(imgBlob);

3. 设置a标签的download属性为图片名，模拟用户点击并触发下载：

downloadLink.download = 'image.jpg'; // 替换为你想要的文件名
document.body.appendChild(downloadLink); // 添加到DOM上模拟点击
downloadLink.click();
// 等待下载完成，然后移除链接
setTimeout(() => {
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(downloadLink.href); // 清理URL引用
}, 0);