uniapp长按图片保存
时间: 2023-08-02 22:27:10 浏览: 154
uniapp 生成海报图片base64转换
你可以在uniapp中使用原生的HTML5方法来实现长按图片保存,例如:
1. 在模板中添加一个图片标签,并指定一个事件触发器:
```
<template>
<img src="your-image-url" @longpress="saveImage" />
</template>
```
2. 在methods中添加长按事件处理函数,并在函数中调用HTML5的Canvas API将图片转换成Base64编码:
```
methods: {
saveImage(){
uni.canvasToTempFilePath({
canvasId: 'canvas',
success: (res) => {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
uni.showToast({
title: '保存成功'
})
},
fail: () => {
uni.showToast({
title: '保存失败'
})
}
})
},
fail: () => {
uni.showToast({
title: '生成图片失败'
})
}
})
}
}
```
3. 在样式中添加一个CSS规则,禁止用户长按图片弹出默认的菜单:
```
img{
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
```
这样你就可以在uniapp中实现长按图片保存的功能了。
阅读全文