JavaScript Canvas绘制灰度图像遇问题：重复/像素化求助

问题 #

我是JavaScript Canvas图像绘制的新手，现有一个图像字节数组，长度为144000字节（对应720宽×200高的图像），每个字节代表单个8位像素强度值，图像为灰度图。

最初编写的代码：

var str = new TextDecoder().decode(buffer, { stream: true });
const img = new Image();
var context = this.htmlcanvaselement.getContext("2d");
var imgdata = context?.getImageData(0, 0, 720, 200);
if (imgdata !== undefined) {
    for (var i = 0; i < buffer.byteLength; i++) {
         var num = str.charCodeAt(i) / 3;
         imgdata.data[i] = num;       //R
         imgdata.data[i + 1] = num;   //G
         imgdata.data[i + 2] = num;   //B
         imgdata.data[i + 3] = 255;   //Alpha
    }
    context?.putImageData(imgdata, 0, 0);
}

绘制结果是图像水平重复四次，且画面泛白难以看清。

之后更新了代码：

const str = new TextDecoder().decode(buffer, { stream: true });
const img = new Image();
const context = this.ibcs.getContext("2d");
const imgdata = context?.getImageData(0, 0, 720, 200);
if (imgdata !== undefined) {
   for (let i = 0; i < buffer.byteLength; i++) {
       let num = str.charCodeAt(i) / 3;
       imgdata.data[i * 4 + 0] = num;
       imgdata.data[i * 4 + 1] = num;
       imgdata.data[i * 4 + 2] = num;
       imgdata.data[i * 4 + 3] = 185;
   }
   context?.putImageData(imgdata, 0, 0);
}

现在图像不再重复，但出现像素化问题，细节远少于源图像，怀疑可能与HtmlImageElement的不同尺寸渲染有关，想请教问题原因及解决办法。

问题原因与解决办法 #

核心问题解析 #

1. 用TextDecoder处理二进制像素数据是错误的
   TextDecoder专为文本解码设计，不能直接处理原始灰度像素字节。当你把0-255的像素值转成字符串时，部分字节会被解析为多字节字符，charCodeAt(i)拿到的数值不是原始像素强度，这直接导致细节丢失、像素化。

2. 第一次代码的重复与泛白问题

• 水平重复四次：ImageData每个像素占4个RGBA通道，你直接用i作为索引，把144000个像素数据塞进了144000个通道位置，实际需要576000个通道位（720×200×4），导致图像被重复填充四次。
• 画面泛白：TextDecoder解析错误让字符编码偏离原始像素值，加上除以3的操作进一步打乱了灰度范围，最终画面整体偏亮泛白。

3. 像素化的根本原因
   第二次代码修正了索引问题，但TextDecoder的错误仍存在，拿到的不是原始0-255的灰度值，细节自然丢失。另外代码里的img变量完全没用，属于冗余代码。

解决步骤 #

1. 直接操作二进制数组，丢弃TextDecoder
   把字节数组转为Uint8Array，直接读取原始像素值，这是处理二进制像素数据的正确方式：

// 假设buffer是ArrayBuffer类型
const pixelData = new Uint8Array(buffer);
const context = this.htmlcanvaselement.getContext("2d");
const imgdata = context?.getImageData(0, 0, 720, 200);
if (imgdata !== undefined) {
    const data = imgdata.data;
    for (let i = 0; i < pixelData.length; i++) {
        const gray = pixelData[i];
        // 灰度图三个颜色通道值一致，Alpha设为255表示不透明
        data[i * 4] = gray;
        data[i * 4 + 1] = gray;
        data[i * 4 + 2] = gray;
        data[i * 4 + 3] = 255;
    }
    context.putImageData(imgdata, 0, 0);
}

2. 确保Canvas尺寸匹配
   检查canvas元素的绘图缓冲区尺寸和显示尺寸是否一致：

• 直接设置canvas的width和height属性：<canvas id="htmlcanvaselement" width="720" height="200"></canvas>
• 如果用CSS控制显示尺寸，要保证CSS宽高和属性值相同，比如：#htmlcanvaselement { width: 720px; height: 200px; }，避免拉伸导致像素化。

3. 清理冗余代码
   删除未使用的const img = new Image();，减少代码混淆。

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