/**
- 绘制海报成功的回调函数
- @param {string} e 生成的海报图片数据URL
*/
const painterSsuccess = (e) => {
console.log('海报生成成功:', e)
posterIsShow.value = true
pictureImage.value = e
uni.hideLoading()
}
// 渲染海报的方法
const renderPoster = () => {
nextTick(() => {
if (posterRef.value) {
posterRef.value.render(posterJson.value)
} else {
console.error('posterRef.value 未正确初始化', posterRef.value)
}
})
}
onLoad(() => {
uni.showLoading({
title: '正在生成海报',
icon: 'loading',
})
// 延迟执行以确保组件已挂载
setTimeout(() => {
renderPoster()
}, 3000)
})
m***@163.com (作者)
<template>
<!-- 显示图像的元素 -->
<image :src="pictureImage" v-if="pictureImage" mode="widthFix" style="width: 700rpx"></image>
<l-painter
ref="posterRef"
@success="painterSsuccess"
@fail="fail"
isCanvasToTempFilePath
performance
path-type="url"
custom-style="position: fixed; left: 200%"
>
</l-painter>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// 海报元素的引用，用于后续操作DOM
const posterRef = ref(null)
// 控制海报是否显示
const posterIsShow = ref(false)
// 存储最终生成的海报图片URL
const pictureImage = ref('')
// 海报的JSON配置
const posterJson = ref({
css: {
width: '750rpx',
paddingBottom: '40rpx',
background: 'linear-gradient(,#000 0%, #ff5000 100%)',
},
views: [
// ... 其他视图配置 ...
],
})
/**
*/
const painterSsuccess = (e) => {
console.log('海报生成成功:', e)
posterIsShow.value = true
pictureImage.value = e
uni.hideLoading()
}
// 渲染海报的方法
const renderPoster = () => {
nextTick(() => {
if (posterRef.value) {
posterRef.value.render(posterJson.value)
} else {
console.error('posterRef.value 未正确初始化', posterRef.value)
}
})
}
onLoad(() => {
uni.showLoading({
title: '正在生成海报',
icon: 'loading',
})
// 延迟执行以确保组件已挂载
setTimeout(() => {
renderPoster()
}, 3000)
})
</script>
<style scoped></style>
2025-04-10 17:12
m***@163.com (作者)
这是完整代码
2025-04-10 17:12
DCloud_UNI_JBB
回复 m***@163.com: 可以发个压缩包吗？
2025-04-10 17:39