y***@163.com
y***@163.com
  • 发布:2023-06-07 12:07
  • 更新:2024-11-08 17:51
  • 阅读:649

vue3使用canvas绘制图片ctx.drawImage在第二次绘制的时候会显示第一次绘制的图片

分类:uni-app

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()
}

2023-06-07 12:07 负责人:无 分享
已邀请:
6***@qq.com

6***@qq.com

每次绘制前, 清空画布

  • y***@163.com (作者)

    使用ctx.fillRect清空了

    2023-06-07 13:38

Diligent_UI

Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序

ctx.draw有个参数设置看看

  • y***@163.com (作者)

    设置ctx.draw(true) 也不生效

    2023-06-07 15:04

8***@qq.com

8***@qq.com - 123123

解决了吗?

要回复问题请先登录注册