Vue3选项式API中HTML Canvas的toDataURL返回空值问题排查

核心原因：Canvas尺寸属性错误 #

你的代码中<canvas>标签的width和height属性添加了px单位，这是HTML Canvas的典型错误：

<!-- 错误写法 -->
<canvas width="256px" height="256px" />

Canvas的width和height是纯数值属性，不需要单位。添加px后，浏览器会将其解析为无效值，导致Canvas实际绘图区域尺寸变为0x0，此时调用toDataURL()必然返回空的Base64数据。

Vue2可能在模板渲染时自动兼容了单位问题，而Vue3对属性解析更严格，保留了原始带单位值，从而触发这个问题。

修复步骤 #

1. 修正Canvas标签属性
   移除width和height的px单位：

   <canvas
       id="imageResizeCanvas"
       ref="imageResizeCanvas"
       style="display:inline"
       width="256"
       height="256"
   />
   

2. 修复参数传递异常
   你调用calculateOffSetWidthAndHeight(img, canvas)时传入了canvas参数，但函数定义仅接收img，导致后续Canvas尺寸变化时计算逻辑失效。修正函数定义：

   function calculateOffSetWidthAndHeight (img, canvas) {
     const CANVAS_SIDE = canvas.width // 改用实际Canvas宽度，避免硬编码
     var width, height, offsetWidth, offsetHeight
   
     if (img.height >= img.width) {
         width = CANVAS_SIDE * img.width / img.height
         height = CANVAS_SIDE
     } else {
         width = CANVAS_SIDE
         height = CANVAS_SIDE * img.height / img.width
     }
     offsetWidth = (CANVAS_SIDE - width) > 0 ? (CANVAS_SIDE - width) / 2 : 0
     offsetHeight = (CANVAS_SIDE - height) > 0 ? (CANVAS_SIDE - height) / 2 : 0
   
     return {
         width: width,
         height: height,
         offsetWidth: offsetWidth,
         offsetHeight: offsetHeight
     }
   }
   

3. 验证Canvas上下文有效性
   在drawImageOnCanvas函数中添加日志，确认Canvas上下文正常获取：

   function drawImageOnCanvas (img, canvas) {
     return new Promise((resolve) => {
       const ctx = canvas.getContext('2d')
       if (!ctx) {
         console.error('无法获取Canvas 2D上下文')
         return
       }
       // 原有绘制逻辑
       ctx.clearRect(0, 0, canvas.width, canvas.height)
       const calculatedImageProperties = calculateOffSetWidthAndHeight(img, canvas)
       ctx.drawImage(img, calculatedImageProperties.offsetWidth, calculatedImageProperties.offsetHeight, calculatedImageProperties.width, calculatedImageProperties.height)
       resolve(canvas.toDataURL())
     })
   }
   

额外检查点 #

• 确认mounted钩子中this.$refs.imageResizeCanvas能正确获取DOM元素，避免模板渲染延迟导致的空引用
• 检查drawImage的参数（偏移量、宽高）均为非负数，防止绘制内容超出Canvas范围

内容的提问来源于stack exchange，提问作者Angelo Badellino