Question

我正在服务器上的python中加载jpg图像。然后，我在客户端上使用javascript加载了相同的jpg图像。最后，我尝试将其与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()

}

Answer 1

您正在先在画布上绘制图像，然后再将画布渲染为张量。在画布上绘画会改变初始图像的形状。例如，除非另外指定（在您的代码中就是这种情况），否则创建的画布的宽度为300 px，高度为150 px。因此，张量的最终形状将或多或少类似于以下[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)
    }

或使用异步/等待

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直接将图像作为张量渲染

载入python keras的jpg与javascript载入的jpg不同

1 个答案: