Как я могу проверить изображение веб-страницы перед его отображением? - PullRequest
Новая
       24

Как я могу проверить изображение веб-страницы перед его отображением?

0 голосов
/ 24 апреля 2020

Мне нужно получить доступ и отобразить коммерческую веб-страницу, которая изменяется в зависимости от переданных параметров. Я упростил это здесь как вызов: www.mywebpage.com?index=42.

С определенными параметрами веб-страница возвращает страницу с ошибкой. Я хочу поймать это в ловушку и сделать что-то еще. Код ниже работает. Я установил изображение невидимого буфера и загрузил на него веб-страницу. Затем в функции onload () я рисую его на элементе canvas и проверяю цвета некоторых пикселей (здесь это упрощено проверкой одного байта одного пикселя)

Если все в порядке. Я загружаю основное изображение. 

 var imgMain = document.getElementById("imgDisplay");

    var imgCopy = new Image();
    callURL = "www.mywebpage.com?index=42";
    imgCopy.src = callURL;            

    imgCopy.onload = function() {
    var context = document.createElement('CANVAS').getContext('2d');
    context.drawImage(imgCopy, 0, 0);.  
    var pixel1_1 = context.getImageData(0, 0, 1, 1).data; 
    if(pixel1_1[0] == 228)  imgMain.src = callURL;

    };

Этот код работает только в функции onload (). Несмотря на то, что все говорят мне, что JavaScript является синхронным языком, установить imgCopy и проверить его перед продолжением невозможно.

В основном для удобства чтения я хотел бы иметь возможность отложить выполнение до полной загрузки imgCopy, а затем вызвать булеву функцию для выполнения тестов на изображении.

У кого-нибудь есть идеи? Большое спасибо Тони Рейнольдсу (Великобритания)

Поскольку я не получил ответа, я решил не быть таким ленивым и поработал с Promises. В конце концов я придумал: 

 const promise = new Promise(function(resolve, reject) {
    img.src = callURL;
    resolve('Success!');
});

promise.then(function(value) {
  var context;
  context = document.createElement('CANVAS').getContext('2d');
  context.drawImage(img, 0, 0); 
  var pixel1_1 = context.getImageData(0, 0, 1, 1).data;
};

Таким образом, загрузка изображения встроена в Promise, и функция .then, которую я надеялся, будет выполняться только после разрешения Promise. Это не сработало .... Кто-нибудь знает, почему нет? Спасибо Тони Рейнольдс

1 Ответ

0 голосов
/ 27 апреля 2020

Ваш код действительно работает или вы его неправильно скопировали, потому что строка imgCopy = callURL; не имеет смысла. Это должно быть imgCopy.src = callURL;. И как говорит Гриффин, установите onload перед настройкой src.

...