6***@qq.com
6***@qq.com
  • 发布:2024-10-16 16:13
  • 更新:2024-10-24 19:52
  • 阅读:255

uni.canvasToTempFilePath 不执行。

分类:鸿蒙Next

<template>
<view class="container">
<canvas
canvas-id="screenshot"
id="screenshot"
style="width: 300px; height: 200px; background-color: aqua;"

</canvas>
<button @click="saveToAlbum" style="margin-top: 20px;">保存到相册</button>
</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const tempImagePath = ref('')

const drawText = () => {
console.log('开始绘制文字')
const ctx = uni.createCanvasContext('screenshot')

ctx.setFillStyle('aqua')
ctx.fillRect(0, 0, 300, 200)

ctx.setFillStyle('black')
ctx.setFontSize(20)
ctx.setTextAlign('center')
ctx.setTextBaseline('middle')

ctx.fillText('你好中国', 150, 100)

ctx.draw(false, () => {
console.log('绘制完成')
// 绘制完成后,立即将 canvas 保存为图片
uni.canvasToTempFilePath({
canvasId: 'screenshot',
success: (res) => {
console.log('Canvas转图片成功:', res.tempFilePath)
tempImagePath.value = res.tempFilePath
},
fail: (err) => {
console.error('Canvas转图片失败:', JSON.stringify(err))
}
})
})
}

const saveToAlbum = () => {
console.log('保存到相册按钮被点击')
if (!tempImagePath.value) {
console.error('临时图片路径不存在')
uni.showToast({ title: '图片未准备好', icon: 'none' })
return
}

uni.showLoading({ title: '正在保存...' })

// #ifdef HarmonyOS
const photoAccessHelper = globalThis.PhotoAccessHelper;
if (photoAccessHelper) {
photoAccessHelper.showAssetsCreationDialog({
fileList: [{
filePath: tempImagePath.value,
displayName: '你好中国.png',
mimeType: 'image/png'
}],
success: (data) => {
console.log('图片保存成功:', JSON.stringify(data))
uni.hideLoading()
uni.showToast({ title: '保存成功', icon: 'success' })
},
fail: (err) => {
console.error('图片保存失败:', JSON.stringify(err))
uni.hideLoading()
uni.showModal({
title: '保存失败',
content: '错误信息: ' + JSON.stringify(err),
showCancel: false
})
}
})
} else {
console.error('PhotoAccessHelper not available')
uni.hideLoading()
uni.showModal({
title: '保存失败',
content: 'PhotoAccessHelper not available',
showCancel: false
})
}
// #endif

// #ifndef HarmonyOS
uni.saveImageToPhotosAlbum({
filePath: tempImagePath.value,
success: () => {
console.log('图片保存成功')
uni.hideLoading()
uni.showToast({ title: '保存成功', icon: 'success' })
},
fail: (err) => {
console.error('图片保存失败:', JSON.stringify(err))
uni.hideLoading()
uni.showModal({
title: '保存失败',
content: '错误信息: ' + JSON.stringify(err),
showCancel: false
})
}
})
// #endif
}

onMounted(() => {
console.log('组件已挂载')
drawText()
})
</script>

<style scoped>
.container {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
</style>

uni.canvasToTempFilePath 不执行succes也不执行fail。请帮忙看下。谢谢

2024-10-16 16:13 负责人:无 分享
已邀请:

最佳回复

DCloud

DCloud

HBuilderX 4.31.2024102414-alpha 已修复。

DCloud_UNI_LXH

DCloud_UNI_LXH

4.31 修复

要回复问题请先登录注册