JS Fiddle中URL图片像素统计功能无输出问题求助

问题描述 #

原本在JS Fiddle中实现了绘制图形的颜色像素与alpha透明像素统计，修改为从URL加载图片进行统计后，脚本的#output区域无输出，疑似未正确识别到图片。

错误原因 #

• 变量名不统一：更新后的代码中获取了context变量，但后续像素统计代码使用未定义的ctx，导致报错。
• 图片加载异步问题：像素统计代码在图片加载完成前就执行，此时canvas尚未绘制图片，获取的是空白画布数据。
• 未定义尺寸变量：直接使用width和height但未赋值，需从canvas或图片获取正确尺寸。
• 位运算优先级错误：判断透明像素的条件0 === buffer32[i] & 0xffffff中，===优先级高于&，导致逻辑错误，需添加括号。
• 变量未声明：base_image未用var/let/const声明，属于全局变量，存在隐患。

修复后的完整代码 #

HTML #

<canvas id="canvas"></canvas>
<div id="output"></div>

CSS #

body {
  background: #fff;
}

#output {
  background: #ddd;
  color: #000;
  padding: 5px;
}

canvas { 
  border: 1px solid red;
}

JavaScript #

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

function make_base() {
  const base_image = new Image();
  base_image.src = 'https://cdn-icons-png.flaticon.com/128/590/590836.png';
  base_image.onload = function() {
    // 设置canvas尺寸与图片一致
    canvas.width = base_image.width;
    canvas.height = base_image.height;
    // 绘制图片到canvas
    context.drawImage(base_image, 0, 0);
    // 绘制完成后执行像素统计
    countTransparentPixels();
  }
}

function countTransparentPixels() {
  const width = canvas.width;
  const height = canvas.height;
  // 获取画布像素数据
  const idata = context.getImageData(0, 0, width, height);
  const buffer32 = new Uint32Array(idata.data.buffer);
  const len = buffer32.length;

  const nrTotal = width * height;
  let nrTransparent = 0;
  for(let i = 0; i < len; i++) {
    // 修正位运算优先级，判断RGB通道是否全为0（透明或黑色）
    if ((buffer32[i] & 0xffffff) === 0) {
       nrTransparent++;
    }
  }

  $('#output').html(`Total: ${nrTotal}<br>Transparent: ${nrTransparent}<br>Non-transparent: ${nrTotal - nrTransparent}`);
}

// 启动图片加载
make_base();

说明 #

• 将像素统计逻辑封装为countTransparentPixels函数，确保在图片加载并绘制完成后调用。
• 同步canvas尺寸与图片尺寸，避免统计区域与实际绘制区域不匹配。
• 修正变量名、位运算优先级等问题，确保代码无报错。
• 使用const/let声明变量，避免全局变量污染。

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