javascriptimagetensorflowknnimagedata

Getting ImageData/HTMLImageElement/HTMLCanvasElement object from image url


I'm trying to develop a program that classifies images using tensorflow and knn-classifier. However, in order to train the program, I need to get images as either ImageData, HTMLImageElement or HTMLCanvasElement.

Hence, I'm looking for a way to get one of these objects simply from the image url (e.g. "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png")

It may be worth mentioning that I'm using nodejs for development. I've attached some code below to help explain what I'm trying to achieve.

const tf = require("@tensorflow/tfjs");
const mobilenetModule = require("@tensorflow-models/mobilenet");
const knnClassifier = require("@tensorflow-models/knn-classifier");

const classifer = knnClassifier.create();

async function start() {
  const mobilenet = await mobilenetModule.load();

  const pic0 = // Get image from "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png";
  const img0 = tf.browser.fromPixels(pic0);
  const logits0 = mobilenet.infer(img0, true);
  classifier.addExample(logits0, 0);

  const pic1 = // Get image from "https://www.pixsy.com/wp-content/uploads/2021/04/ben-sweet-2LowviVHZ-E-unsplash-1.jpeg";
  const img1 = tf.browser.fromPixels(pic1);
  const logits1 = mobilenet.infer(img1, true);
  classifier.addExample(logits1, 0);

  const check = await axios.get(
    "https://cryptotvnetwork.com/wp-content/uploads/2021/04/4ee1ad2ffbb00866fb7c55c61786e95d.jpg",
    { responseType: "arrayBuffer", }
  );
  const x = tf.browser.fromPixels(check);
  const xlogits = mobilenet.infer(x, true);
  const p = classifier.predictClass(xlogits);
  console.log(p);
}

start();

I apologize in advance if this is a stupid or duplicate question however I haven't been able to find on this during my time searching.


Solution

  • The tensor has to be created once the image is loaded.

    async function getImage() {
      var pic0 = new Image();
      pic0.src = 'https://www.google.com/favicon.ico';
    
      pic0.onload = () => {
        var img0 = tf.browser.fromPixels(pic0);
        return img0;
      }
    }