Javascript Canvas读取图片数据并显示异常求助

嘿，我帮你找到了代码里的几个关键问题，这些正是导致图片无法显示的原因，咱们一步步来修复：

核心错误点 #

• getImageData调用时机错误：你在绘制图片到画布之前就获取了图像数据，这时候画布是完全空白的，拿到的是全透明的ImageData，后续再放回画布自然也看不到内容。
• drawImage参数错误：ctx.drawImage(this, canvas.width , canvas.height) 把图片的绘制位置设置成了画布的宽高值，相当于把图片画到了画布的外部区域（画布坐标原点在左上角，x/y等于宽高的话就超出了可见范围），等于没画任何内容。
• putImageData位置错误：同样，你把ImageData放到了(canvas.width, canvas.height)的位置，这也超出了画布的可见区域，无法显示。
• 潜在的jQuery依赖问题：如果你的项目没有引入jQuery库，$('#test').get(0)会直接报错，建议用原生DOM方法更稳妥。

修复后的完整代码 #

<body>
  <img src="" id="test">
</body>
<script>
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
let img = new Image();
img.onload = getIt;
img.src = 'download.png';

function getIt() {
  // 设置canvas宽高与图片一致
  canvas.width = this.width;
  canvas.height = this.height;
  
  // 第一步：先把图片绘制到画布左上角
  ctx.drawImage(this, 0, 0);
  
  // 如果需要处理图像数据，这里再获取（原代码只是获取再放回，可根据需求修改）
  const imageData = ctx.getImageData(0, 0, this.width, this.height);
  // 把图像数据放回画布可见区域
  ctx.putImageData(imageData, 0, 0);
  
  // 用原生DOM方法获取img元素，避免jQuery依赖
  document.getElementById('test').src = canvas.toDataURL("image/png");
}
</script>

修复逻辑说明 #

1. 图片加载完成后，先将canvas的宽高设置为和图片一致，确保画布能容纳整个图片。
2. 调用drawImage(this, 0, 0)把图片从画布的左上角开始绘制，确保内容在可见范围内。
3. 此时再获取ImageData，拿到的就是图片的真实像素数据了；如果不需要处理像素，其实可以直接省略getImageData和putImageData这两步，直接把canvas转成data URL即可。
4. 用原生document.getElementById('test')获取目标img元素，避免依赖第三方库带来的潜在问题。

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