Расширение Firefox не может выбрать все изображения, возможно, из-за функции Canvas getImageData () - PullRequest
1 голос
/ 09 марта 2020

В приведенном ниже коде я импортировал свою модель машинного обучения через функцию model_startup (). model_startup () работает нормально. Но после этого я попадаю в функцию blockk (), через эту функцию я пытаюсь выбрать все изображения на сайте по document.getElementsByTagName ('img') и выполнить прогнозирование по этому изображению с помощью импортированной модели. Но моя проблема в том, что моя вторая функция не в том, чтобы выбирать все изображения на веб-сайте и выбирать только некоторое количество начальных изображений, и после предсказания того, что некоторое количество изображений будет остановлено.

Я новичок в javascript и пытаясь реализовать его как расширение firefox. Пожалуйста, помогите мне в этой проблеме

console.log('STARTING UP')

const MODEL_PATH = 'mdl/model.json'
const IMAGE_SIZE = 64;

let model;
async function model_startup() 
{

    console.log('Launching TF.js!');
    tf.ENV.set('WEBGL_PACK',false);
    await tf.ready();
    console.log('TensorflowJS backend is: '+tf.getBackend());
    let url = browser.runtime.getURL(MODEL_PATH);
    console.log('Loading model... '+url);

    try
    {
        model = await tf.loadLayersModel(url);
    }
    catch(e)
    {
        console.log('Failed to load model! '+e);
    }
    console.log('Model: ' + model);

    console.log('Warming up...');
    let dummy_data = tf.zeros([1, IMAGE_SIZE, IMAGE_SIZE, 3]);
    // dummy_data.print();  
    let warmup_result = model.predict(dummy_data);


    console.log("finding type : $$$$$$$$ " + typeof warmup_result)
    warmup_result.print();
    warmup_result.dispose();
    console.log('Ready to go!');
    // blockk();
};
model_startup().then(blockk);

function blockk() {
        const x = document.getElementsByTagName('img');
        console.log("wn ############################## " + x.length);

        let inferenceCanvas = document.createElement('canvas');
        inferenceCanvas.width = 64;
        inferenceCanvas.height = 64;
        let inferenceCtx = inferenceCanvas.getContext('2d', { alpha: false});
        inferenceCtx.imageSmoothingEnabled = true;

        for(var i = 0; i < x.length; i++)
        {
            console.log('pixel kmvsl lsvn');    

            let img = x[i];

            inferenceCtx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 64, 64);
            const rightSizeImageData = inferenceCtx.getImageData(0, 0, 64, 64); //write promise. It may work.

            const rightSizeImageDataTF = tf.browser.fromPixels(rightSizeImageData);
            const floatImg = rightSizeImageDataTF.toFloat();
            console.log('predicting...');
            let scaled = floatImg.div(tf.scalar(255));
            let batched = tf.stack([scaled]);

            let result = model.predict(batched);
            const val = result.dataSync()[0];
            console.log(val);

            if (val > 0.4) 
            {

                console.log("blocking" + i);    
                let h = img.height
                let w = img.width
                pth = img.src
                x[i].setAttribute("src", "https://indianonlineseller.com/wp-content/uploads/2017/05/blocked-listing.png");
                // x[i].setAttribute("onclick", ` this.src = '${pth}' `);


                x[i].setAttribute("data-src", "https://indianonlineseller.com/wp-content/uploads/2017/05/blocked-listing.png");
                x[i].height = h;
                x[i].width = w;

                console.log('blocked');

            }
            console.log("co @@@@@@@@@@@@@@@@@@@@@@@@@@@ " + x.length)
        }
};

Строка в моем коде, вызывающая проблему: const rightSizeImageData = inferenceCtx.getImageData(0, 0, 64, 64); Если я удаляю этот код и другой код, связанный с этой строкой, и я запускаю его, тогда мой код может выберите все изображения на веб-странице. Можете ли вы сказать мне, почему это может происходить?

...