JPG загружается с Python Keras отличается от JPG загружается в JavaScript - PullRequest
Новая
       8

JPG загружается с Python Keras отличается от JPG загружается в JavaScript

0 голосов
/ 23 января 2019

Я загружаю изображение jpg в python на сервер. Затем я загружаю то же самое изображение JPG с JavaScript на клиенте. Наконец, я пытаюсь сравнить его с выводом Python. Но загруженные данные отличаются, поэтому изображения не совпадают. Где у меня ошибка?

Код Python 

from keras.preprocessing.image import load_img
from keras.preprocessing.image import img_to_array    
filename = './rcl.jpg'
original = load_img(filename)
numpy_image = img_to_array(original)
print(numpy_image)

JS код 

import * as tf from '@tensorflow/tfjs';
photo() {
    var can = document.createElement('canvas');
    var ctx = can.getContext("2d");
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
    };
    img.crossOrigin = "anonymous";
    img.src = './rcl.jpg';

    var tensor = tf.fromPixels(can).toFloat();
    tensor.print()

}

1 Ответ

0 голосов
/ 23 января 2019

Вы рисуете изображение на холсте, прежде чем визуализировать холст как тензор. Рисование на холсте может изменить форму исходного изображения. Например, если не указано иное - как в случае с вашим кодом - холст создается с шириной 300 пикселей и высотой 150 пикселей. Поэтому результирующая форма тензора будет более или менее похожа на следующую [150, 300, 3].

1 - Использование холста

Холст подходит для изменения размера изображения, так как можно нарисовать на холсте все или часть исходного изображения. В этом случае нужно изменить размер холста. 

const canvas = document.create('canvas')
// canvas has initial width: 300px and height: 150px
canvas.width = image.width
canvas.height = image.heigth
// canvas is set to redraw the initial image
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0) // to draw the entire image

Одно слово предостережения: все вышеперечисленные фрагменты должны быть выполнены после завершения загрузки изображения с использованием обработчика событий onload, как показано ниже 

    const im = new Image()
    im.crossOrigin = 'anonymous'
    im.src = 'url'
    // document.body.appendChild(im) (optional if the image should be displayed)
    im.onload = () => {
      const canvas = document.create('canvas')
      canvas.width = image.width
      canvas.height = image.heigth
      const ctx = canvas.getContext('2d')
      ctx.drawImage(image, 0, 0)
    }

или используя async / await 

function load(url){
  return new Promise((resolve, reject) => {
    const im = new Image()
        im.crossOrigin = 'anonymous'
        im.src = 'url'
        im.onload = () => {
          resolve(im)
        }
   })
}

// use the load function inside an async function   

(async() => {
     const image = await load(url)
     const canvas = document.create('canvas')
     canvas.width = image.width
     canvas.height = image.heigth
     const ctx = canvas.getContext('2d')
     ctx.drawImage(image, 0, 0) 
   })()

2 - Использование fromPixel непосредственно на изображении

Если размер изображения не нужно изменять, вы можете напрямую отобразить изображение как тензор, используя fromPixel на самом изображении

...