要实现在
Vue编写的APP中，
长按
保存图片至本地，可以参考以下步骤：
1. 首先，在
Vue组件中引入HTML5的FileSaver库，用于将文件
保存到本地。
```
npm install file-saver --save
```
2. 在需要
保存图片的地方，添加一个
长按事件（例如
长按
图片），并获取
图片的URL。
```
<template>
<img src="your-image-url" @touchstart="onLongPress">
</template>
<script>
import { saveAs } from 'file-saver';
export default {
methods: {
onLongPress(e) {
e.preventDefault();
const imgUrl = e.target.src;
// ...
},
},
};
</script>
```
3. 接下来，使用XMLHttpRequest获取
图片数据，并将其转换为Blob对象。
```
const xhr = new XMLHttpRequest();
xhr.open('GET', imgUrl, true);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
const blob = xhr.response;
// ...
}
};
xhr.send();
```
4. 最后，使用FileSaver库将Blob对象
保存为文件。
```
const fileName = 'your-file-name.png';
saveAs(blob, fileName);
```
完整示例代码：
```
<template>
<img src="your-image-url" @touchstart="onLongPress">
</template>
<script>
import { saveAs } from 'file-saver';
export default {
methods: {
onLongPress(e) {
e.preventDefault();
const imgUrl = e.target.src;
const xhr = new XMLHttpRequest();
xhr.open('GET', imgUrl, true);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
const blob = xhr.response;
const fileName = 'your-file-name.png';
saveAs(blob, fileName);
}
};
xhr.send();
},
},
};
</script>
```
注意：由于涉及到文件下载，需要确保浏览器支持download属性，以及用户授权下载。在移动端需要使用touchstart事件，而不是click事件。
扫一扫
5213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
