Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
The behavior of the three resize methods (cropAndResize, resizeNearestNeighbor and resizeBilinear)
See original GitHub issueproblem
What is the difference between the three resize methods (cropAndResize, resizeNearestNeighbor and resizeBilinear)? CropAndResize and resizeNearestNeighbor do not return the expected results. Why is the bottom half of my image lost?
background
We would like to develop an application that performs image processing in Tensorflow.js. To do so, we need to match the size of the image to be input to the trained model. The image to be input is large, so I want to simply scale it down to 128x128. I have found 3 resize methods on the following page, but they do not give me the results I expect. The bottom half of the image is lost. Does anyone have any good ideas?
code
This is the source code I wrote.
<!DOCTYPE html>
<html>
<head></head>
<meta charset="utf-8"/>
<body>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"></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>
<script>
const canvas1 = document.getElementById('canvas1');
const canvas2 = document.getElementById('canvas2');
const canvas3 = document.getElementById('canvas3');
const canvas4 = document.getElementById('canvas4');
const SIZE = 128;
const COL_CHANNEL = 3;
const inputImg = new Image(); inputImg.src = "../00_resources/woman172.jpg";
const inCtx = canvas1.getContext('2d');
// image1 (original image)
inCtx.drawImage(inputImg, 0, 0, canvas1.width, canvas1.height);
let img1 = tf.browser.fromPixels(canvas1, COL_CHANNEL);
// image2 (resized image - using 'cropAndResize')
let img2 = tf.image.cropAndResize(img1.expandDims(0), [[0, 0, 1, 1]], [0], [SIZE,SIZE]).div(tf.scalar(255)).squeeze();
tf.browser.toPixels(img2, canvas2);// NG
// image3 (resized image - using 'resizeNearestNeighbor')
let img3 = tf.image.resizeNearestNeighbor(img1, [SIZE, SIZE]).toFloat().div(tf.scalar(255));
tf.browser.toPixels(img3, canvas3);// NG
// image4 (resized image - using 'resizeBilinear')
let img4 = tf.image.resizeBilinear(img1, [SIZE, SIZE]).toFloat().div(tf.scalar(255));
tf.browser.toPixels(img4, canvas4);// OK?
</script>
</body>
</html>
From left to right.
- Original Image.
- Resized image using cropAndResize (half of the image is black)
- Resized image using resizeNearestNeighbor (half of the image is black)
- Resized image using resizeBilinear (appears to be the correct result)
reference
Issue Analytics
- State:
- Created 3 years ago
- Reactions:2
- Comments:16 (5 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Thanks, just pulling out the graphics card info for other to see.
Display adapter 0 ID 0x4000000 Name Intel® HD Graphics 4000 Board Manufacturer 0x10CF (0x176D) PCI device bus 0 (0x0), device 2 (0x2), function 0 (0x0) Vendor ID 0x8086 (0x10CF) Model ID 0x0162 (0x176D) Revision ID 0x9 Performance Level 0
cc @annxingyuan @pyu10055 for comparison with other related issues.
I’ll report what I’ve found.
About 1.
I checked with three different browsers - firefox, chrome and edge - and the results were the same. (I’m attaching a picture just in case) All browsers are kept up to date.
About 2.
I specified the version of tensorflowjs explicitly. For example, to specify the latest version 2.4.0, I used the following
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.4.0/dist/tf.min.js"></script>What I’ve found here is that the same phenomenon exists if you go back to 1.1.2. I’ve attached an image of this as well.
I don’t know if it’s related, but if you go back to 0.15.3, ‘resizeBilinear’ is also incomplete in the same way. I’ve attached an image of this as well.
It might give you a clue if there was a feature update for ‘resizeBilinear’ in the 0.15.3 to 1.1.2 versions.