How will I insert our own picture?
alaosion2019 opened this issue · 2 comments
How will I insert our own picture? Convert the image to JSON format. When inserting, it can't be uploaded too much.
Hi @alaosion2019,
A cool aproach can be this:
First upload an image in an image html element (I named it results )
let canvas = document.getElementById('canvas');
let imageSnap = document.getElementById('results');
let context = canvas.getContext( '2d' );
context.drawImage(imageSnap,0,0, canvas.width, canvas.height); // you can draw the image in a canvas and after to get the data from the image
let imgData = context.getImageData( 0, 0, canvas.width, canvas.height );
context.putImageData(imgData,0,0);
let cameraImage = [];
let size = imgData.width * imgData.height *4; // get the size of the image (is multiplied by 4 because we have 4 channels RGBA )
let maxR = 0;
let minR = 255;
let maxG = 0;
let minG = 255;
let maxB = 0;
let minB = 255;
// for normalization method we need to take the max and min of each channel and ignore Alfa chanel
for (let i = 0, dx = 0; dx < size; i++, dx = i << 2) {
cameraImage.push( imgData.data[dx]);
if(imgData.data[dx] > maxR){
maxR= imgData.data[dx];
}
if(imgData.data[dx] < minR){
minR= imgData.data[dx];
}
cameraImage.push( imgData.data[dx+1]);
if(imgData.data[dx] > maxG){
maxG= imgData.data[dx];
}
if(imgData.data[dx] < minG){
minG= imgData.data[dx];
}
cameraImage.push( imgData.data[dx+2]);
if(imgData.data[dx] > maxB){
maxB= imgData.data[dx];
}
if(imgData.data[dx] < minB){
minB= imgData.data[dx];
}
}
// normalize the data in order to fit in as an input in model.predict()
for(let j =0 ; j< cameraImage.length;j+=3){
cameraImage[j] = 2*(cameraImage[j] - minR) / (maxR - minR)
cameraImage[j+1] = 2*(cameraImage[j+1] - minG) / (maxG - minG)
cameraImage[j+2] = 2*(cameraImage[j+2] - minB) / (maxB - minB)
}
// camera image is now an array with values betwwen -1 and 1 that can be interpreted by the network
model.predict(cameraImage, function (finalResult) {
generateInference(finalResult)
});
Hi @cBogdan96,
thank you for your proposal, i coded it in python and it's fine.
Be carefull because there's errors in your code, each 'imgData.data[dx]' must correspond to the related color channel for R, B and G while in your code it always access the 'R' channel value.
Lines 'if(imgData.data[dx] > maxG){' and 'if(imgData.data[dx] < minG){' for example must be 'imgData.data[dx+1]' and so on for the rest 'imgData.data[dx+2]' for the 'B' color value channel.
We assume that we have image from imagenet here 'helico.jpg', it generates intermediate 'png' file (may be useless) and 'json' file with RGB values. The 'json' file can be used with tensorspace model predict.
from PIL import Image
import json
# Normally select img_file_path image
image = Image.open('helico.jpg')
#to be used with alexnet trained model in tensorspace
new_image = image.resize((227,227))
new_image.save('helico.png')
rgb_image = new_image.convert('RGB')
rgb_value = list(rgb_image.getdata())
dest_image = []
maxR = 0
minR = 255
maxG = 0
minG = 255
maxB = 0
minB = 255
for rgb in rgb_value:
# Red
if rgb[0] > maxR:
maxR= rgb[0]
if rgb[0] < minR:
minR= rgb[0]
# Green
if rgb[1] > maxG:
maxG= rgb[1]
if rgb[1] < minG:
minG= rgb[1]
# Blue
if rgb[2] > maxB:
maxB= rgb[2]
if rgb[2] < minB:
minB= rgb[2]
for rgb in rgb_value:
dest_image.append(2*(rgb[0] - minR) / (maxR - minR))
dest_image.append(2*(rgb[1] - minG) / (maxG - minG))
dest_image.append(2*(rgb[2] - minB) / (maxB - minB))
#normally use img_file_path
with open('helico.json', 'w') as outfile:
json.dump(dest_image, outfile)
I used it with tensorspace alexnet NN example and it works fine.