vue3使用canvas绘制图片ctx.drawImage在第二次绘制的时候会显示第一次绘制的图片 在第二次绘制code 的时候还是会显示第一次绘制的图片,已经验证过code生成的图片是正确的,就是绘制后的展示和实际不一致。有没有哪位大佬遇到这个问题?求解!!!
<template>
<view class="poster">
<canvas canvas-id="poster-canvas"></canvas>
</view>
</template>
/* 挂载 /
onMounted(async () => {
console.log('onMounted', instance.value)
instance.value = getCurrentInstance()
state.shareShow = true
await createPoster()
})
/* 绘制海报图 /
const createPoster = async () => {
uni.showLoading({ title: '海报生成中' })
state.completeDraw = false
//创建 canvas 绘图上下文
let device = await uni.getSystemInfo()
const dw = device?.windowWidth
const dh = device?.windowHeight
console.log('device', dw, dh) // 375 619*2=1238
let ratio = dw / 375
const ctx = uni.createCanvasContext('poster-canvas', instance.value)
ctx.fillStyle = '#ffffff'
ctx.fillRect(0, 0, 216 ratio, 382 ratio)
ctx.draw()
const codePic = await createSunCode(props.shareParams, props.shareExitType)
const code = await base64ToSave(codePic)
ctx.drawImage(code as string, 0, 0, 200, 200)
ctx.draw()
}
y***@163.com (作者)
使用ctx.fillRect清空了
2023-06-07 13:38