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

发布于 1周前 作者 caililin 来自 Uni-App

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

问题描述

vue3使用canvas绘制图片ctx.drawImage在第二次绘制的时候会显示第一次绘制的图片。在第二次绘制时，代码生成的图片是正确的，但绘制后的展示和实际不一致。有没有哪位大佬遇到这个问题？求解！！！

代码示例

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

Harmonyos Next教程
7 回复

每次绘制前, 清空画布


使用ctx.fillRect清空了

ctx.draw有个参数设置看看

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

解决了吗？

我也遇到这个问题了，请问解决了吗

在uni-app中使用Vue 3和Canvas进行图片绘制时，如果在第二次调用ctx.drawImage时显示了第一次绘制的图片，这通常是由于Canvas的状态没有被正确重置或清除。为了确保每次绘制前Canvas都是干净的，你可以在绘制新图片前清除Canvas的内容。

以下是一个示例代码，展示如何在uni-app的Vue 3组件中使用Canvas绘制图片，并确保每次绘制前清除Canvas：

<template>
  <view>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
    <button @click="drawImage">Draw Image</button>
  </view>
</template>

<script>
export default {
  methods: {
    drawImage() {
      const ctx = uni.createCanvasContext('myCanvas');
      
      // 清除Canvas内容
      ctx.clearRect(0, 0, 300, 300);
      
      // 假设我们有一个图片的路径，这里使用本地资源路径
      const imagePath = '/static/myImage.png'; // 替换为你的图片路径
      
      uni.getImageInfo({
        src: imagePath,
        success: (res) => {
          const imgWidth = res.width;
          const imgHeight = res.height;
          
          // 设置图片大小和位置，这里简单设置为居中
          const canvasWidth = 300;
          const canvasHeight = 300;
          const x = (canvasWidth - imgWidth) / 2;
          const y = (canvasHeight - imgHeight) / 2;
          
          // 绘制图片
          ctx.drawImage(res.path, x, y, imgWidth, imgHeight);
          ctx.draw(false, () => {
            console.log('Image drawn');
          });
        },
        fail: (err) => {
          console.error('Failed to get image info:', err);
        }
      });
    }
  }
}
</script>

<style scoped>
/* 添加你的样式 */
</style>

代码说明：

  1. Canvas Clearing: 使用ctx.clearRect(0, 0, 300, 300);来清除Canvas的内容。这里的参数是Canvas的左上角坐标(0, 0)和右下角坐标(300, 300)，根据你的Canvas大小调整。
  2. Image Loading: 使用uni.getImageInfo获取图片信息，确保图片已经加载完成。
  3. Image Drawing: 在获取图片信息成功后，使用ctx.drawImage绘制图片。
  4. Button Trigger: 每次点击按钮时调用drawImage方法，确保Canvas内容被清除后再绘制新图片。

这样，每次点击按钮时，Canvas都会先清除内容，再绘制新的图片，避免了第二次绘制时显示第一次绘制的内容的问题。

回到顶部