uni-app中关于canvasGetImageData返回错误的width和height问题

uni-app中关于canvasGetImageData返回错误的width和height问题

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

操作步骤：

  • canvas的width和height设定为300和1000；但是canvasGetImageData 返回的width和height是300和300. 而不是实际height

预期结果：

  • canvasGetImageData 返回的宽和高是300和1000

实际结果：

  • canvasGetImageData 返回的宽和高是300和300

bug描述：

<canvas style="width:300px;height:1000px" canvas-id="myCanvas" id="myCanvas"></canvas>  
---
ctx.drawImage("../../static/1.jpg", 0, 0, 300, 1000);  
---
以上canvas的width和height是300和1000；但是下面的canvasGetImageData 返回的width和height是300和300.  
uni.canvasGetImageData({  
    canvasId: 'myCanvas',  
    x: 0,  
    y: 0,  
    width:300,  
    height:1000,  
    success: (res) => {  
        console.log(res.width) // 300  
        console.log(res.height) // 300  
        console.log(res.data.length);  
});

更多关于uni-app中关于canvasGetImageData返回错误的width和height问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

问题已确认，已加分，下版修复

更多关于uni-app中关于canvasGetImageData返回错误的width和height问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HBuilderX 3.1.3 alpha 已修复

在uni-app中使用canvas时，canvasGetImageData返回的width和height与实际不符的问题，通常是由于CSS样式和canvas实际绘制尺寸不匹配导致的。关键点如下：

  1. 在canvas中，style设置的width/height是显示尺寸，而canvas的实际绘制尺寸需要通过width/height属性设置（不是style）

  2. 正确的做法应该是：

<canvas 
  style="width:300px;height:1000px" 
  canvas-id="myCanvas" 
  id="myCanvas"
  width="300"
  height="1000">
</canvas>
回到顶部