uni.canvasToTempFilePath 导出临时路径后 uni.saveImageToPhotosAlbum 保存到相册 ;安卓手机显示空白
l***@163.com
- 发布:2024-03-18 16:55
- 更新:2024-03-18 18:47
- 阅读:58
喜欢技术的前端 - QQ---445849201
可以的,你试试android
<template>
<view class="c-display-flex-V-center my-page-container">
<canvas style="width: 300px; height: 200px;" canvas-id="myCanvas" id="myCanvas"></canvas>
<button @click="downloadImg">保存</button>
</view>
</template>
<script>
const ctxW = 280;
const ctxH = 275;
export default {
onReady() {
var context = uni.createCanvasContext('myCanvas')
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
context.stroke()
context.draw()
},
methods: {
downloadImg() {
uni.showLoading({
title: '正在下载...',
});
console.log(ctxW, ctxH)
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
x: 0,
y: 0,
width: ctxW,
height: ctxH,
destWidth: ctxW,
destHeight: ctxH,
quality: 1.0,
success: function(res) {
console.log('canvasToTempFilePath_success');
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function(saveRes) {
uni.showToast({
title: '保存成功',
});
},
fail: function(saveErr) {
if (saveErr.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' ||
saveErr.errMsg === 'saveImageToPhotosAlbum:fail auth deny' ||
saveErr.errMsg ===
'saveImageToPhotosAlbum:fail authorize no response'
) {
uni.showModal({
title: '需要您授权保存相册',
modalType: false,
success: modalRes => {
uni.openSetting({
success(settingRes) {
console.log('settingRes',JSON.stringify(settingRes));
if (settingRes.authSetting[
'scope.writePhotosAlbum'
]) {
uni.showModal({
title: '温馨提醒',
content: '获取权限成功,再次点击保存即可~',
modalType: false,
})
} else {
uni.showModal({
title: '温馨提醒',
content: '获取权限失败,将无法保存到相册哦~',
modalType: false,
})
}
},
fail(settingError) {
console.log('settingError',
JSON.stringify(
settingError));
},
});
},
});
}
},
});
},
fail: function(err) {
console.log(JSON.stringify(err));
uni.showToast({
title: '生成图片失败',
});
},
}, this);
},
},
}
</script>
<style scoped>
.my-page-container {
background-color: white;
height: 500px;
}
.my-page-canvas {
width: 280px;
height: 275px;
}
.my-page-canvas-core {
box-sizing: border-box;
width: 280px;
height: 275px;
padding: 15px;
display: flex;
flex-direction: column;
align-items: center;
}
.core-head-image {
width: 250px;
height: 35px;
}
.core-content-image {
margin-top: 10px;
width: 200px;
height: 200px;
background-color: #f3f3f3;
}
</style>
l***@163.com (作者)
谢谢你
2024-03-22 19:29