Tensorflow.js 中的图像大小调整方法（resizeBilinear 和 resizeNearestNeighbor）不会返回正确的结果答案

【问题标题】：The image resizing methods (resizeBilinear and resizeNearestNeighbor) in Tensorflow.js do not return the correct resultsTensorflow.js 中的图像大小调整方法（resizeBilinear 和 resizeNearestNeighbor）不会返回正确的结果
【发布时间】：2025-12-25 10:10:06
【问题描述】：

问题

resizeBilinear(*1) 和resizeNearestNeighbor(*2) 有什么区别？特别是， resizeNearestNeighbor 不会返回正确的图像（图像的一半是黑色的）。（图像的一半是黑色的。）
ResizeBilinear 不会返回正确的分割结果。（图像的一半是灰色的。）这是为什么？这与 resizeNearestNeighbor 的结果非常相似。

背景

我想开发一个在 Tensorflow.js 中进行分段的应用程序。幸运的是，我找到了一些 Python 中的分割示例代码。 (*3) 我相信我可以通过将在那里获得的 Keras 模型转换为 TFJS 模型来在 Tensorflow.js 中进行分割。我试图调整 Tensorflow.js 中的图像大小，但我无法获得正确的结果。有人有什么好主意吗？

代码

这是我编写的源代码。（我不习惯写 JavaScript。）

<!DOCTYPE html>
<html>
<head></head>
<meta charset="utf-8"/>
<body>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<canvas id="canvas1" width="256" height="256" style="border: 2px solid;"></canvas>
<canvas id='canvas2' width="128" height="128" style="border: 2px solid;"></canvas>
<canvas id='canvas3' width="128" height="128" style="border: 2px solid;"></canvas>
<canvas id='canvas4' width="128" height="128" style="border: 2px solid;"></canvas>
<canvas id='canvas5' width="128" height="128" style="border: 2px solid;"></canvas>
<script>

var inputImg = new Image();inputImg.src = "../00_resources/woman172.jpg";
const canvas1 = document.getElementById('canvas1');
const canvas2 = document.getElementById('canvas2');
const canvas3 = document.getElementById('canvas3');
const canvas4 = document.getElementById('canvas4');
const canvas5 = document.getElementById('canvas5');

const SIZE = 128;
const COL_CHANNEL = 3;
const BIN_CHANNEL = 1;

inputImg.onload = () => {
  const inCtx = canvas1.getContext('2d');
  inCtx.drawImage(inputImg, 0, 0, canvas1.width, canvas1.height);
};


(async() => {

    // load model
    let model = await tf.loadGraphModel('/tfjsdoc/Portrait-Segmentation/model/deconv_bnoptimized_munet_to_tfjs_graph_model/model.json');

    // image1 (original image)
    let img1 = tf.browser.fromPixels(canvas1, COL_CHANNEL);
    tf.browser.toPixels(img1, canvas2);// OK

    // image2 (resized image - using 'resizeNearestNeighbor')
    let img2 = img1.resizeNearestNeighbor([SIZE, SIZE]).toFloat().div(tf.scalar(255));
    tf.browser.toPixels(img2, canvas3);// NG

    // image3 (resized image - using 'resizeBilinear')
    let img3 = img1.resizeBilinear([SIZE, SIZE]).toFloat().div(tf.scalar(255));
    tf.browser.toPixels(img3, canvas4);// OK?

    // predict (image3 is used to make predictions, but the same problem occurs as in image2)
    let pred = await model.predict(tf.reshape(img3, [-1,SIZE,SIZE,COL_CHANNEL])).data();
    tf.browser.toPixels(tf.tensor(pred, [SIZE,SIZE, BIN_CHANNEL]), canvas5);// NG

})();

</script>
</body>
</html>

Capturing the Execution Result

从左到右。

原图
原始图像是在画布上拍摄和绘制的
使用 resizeNearestNeighbor 调整大小并在画布上绘制的原始图像（图像的一半是黑色）
使用 resizeBilinear 调整大小并在画布上绘制的原始图像（看起来正确）
使用 resizeBilinear 调整大小并在画布上绘制的原始图像的分割（图像的一半是灰色的）

参考文献

(*1)https://js.tensorflow.org/api/latest/#image.resizeBilinear

(*2)https://js.tensorflow.org/api/latest/#image.resizeNearestNeighbor

(*3)https://github.com/anilsathyan7/Portrait-Segmentation

【问题讨论】：

标签： javascript tensorflow.js tensorflowjs-converter

【解决方案1】：

根据我的经验，似乎两者都完成了输入图像的类似调整。 ResizeBilinear 对图像进行双线性插值。

【讨论】：

亲爱的 ytrao，谢谢您的回复。你的断言是正确的。我已经实现了尺寸变化。正如我在最初的帖子中所指出的，请查看下面的图片。 i.stack.imgur.com/IZ2KW.png 我遇到的问题是图像不完整，调整大小后图像的下半部分丢失。你知道为什么会这样吗？我也想知道如何避免这种情况。谢谢你和最好的问候，