2

I am working on chrome extension. The task is to classify images on a webpage. I have set up my model, i am constantly getting an error when converting image to a tensor before making a prediction. I am getting all the images using document.getElementsByTagName('img'). This returns an object. Then i am using tensor = tf.fromPixels(image[0]) to get tensor.

It says :

Error in event handler for runtime.onMessage: Error: pixels passed to tf.fromPixels() must be either an HTMLVideoElement, HTMLImageElement, HTMLCanvasElement or ImageData, but was Object at pre_process () at

Please help.

EDIT: My code is:

//to load images
function load_imgs(debug) {
    //for onload images of a webpage
    if(debug == 'static'){
      imgs = document.getElementsByTagName('img');
      console.log('imgs type after get bytag', typeof imgs);
      var imgSrcs = [];

      for (var i = 0; i < imgs.length; i++) {
          imgSrcs.push(imgs[i]);
      }
      console.log('imgSrcs type:', typeof imgSrcs);

      return imgSrcs;
    }
} 

Passing it to background Script as:

//send request to background script,takes image elem ref as input
function back_request(elem_ref){

    console.log('from back_request ' + typeof elem_ref);
    console.log("back_request : ", elem_ref);

    chrome.runtime.sendMessage({
        get_predict: "predict",
        img: elem_ref
    },function (response) {
        console.log(response.prediction_model);
    });
}

This is background Script listener for message

//message listner for the prediction
chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
         console.log(sender.tab ?
             "from a content script:" + sender.tab.url :
             "from the extension");
         if (request.get_predict == "predict") {
             to_predict = request.img;
             console.log('from receive request ', to_predict);
             tensor = pre_process(to_predict); //this generates an error, since i am using tf.fromPixels() method to convert it to a tensor to make a prediction
             ans = predict_str(model, tensor);
             sendResponse({
                 prediction_model: 'Processing'
             });
         }
  • if you know any other method to get all images on a webpage as HTMLImageElement, please let me know :) – Erlich Bachman Feb 10 '19 at 11:46
  • Possible duplicate of [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) – Kaiido Feb 10 '19 at 12:09
  • `document.getElementsByTagName('img')` returns a collection, you need to pick your element from this collection. – Kaiido Feb 10 '19 at 12:10
  • Extension messaging cannot transfer DOM elements. – wOxxOm Feb 10 '19 at 12:16
  • 1
    Could you please show your HTML and Js code ? – edkeveked Feb 12 '19 at 16:47
  • @edkeveked i have edited the question and have added the code :) – Erlich Bachman Feb 13 '19 at 10:25
  • 1
    @sh_07 your code does not contain the part where you're using `tf.fromPixel`. Also it is best practice to remove all the `console.log` and comments that are not explanatory when you post code on stackoverflow so that people can see straight away what is going wrong. – edkeveked Feb 14 '19 at 21:58
  • @edkeveked hey i forgot to post that part, my bad. I found a way around it. I got the image element into background script and created a new elmen with the src. It is working now :) facing challenge with tf memory tho! I shall post the answer soon! – Erlich Bachman Feb 16 '19 at 13:35
  • Great you solved it ! – edkeveked Feb 16 '19 at 15:40

0 Answers0