Обнаружить изображение jpg правильно загружено

Question

Я разрабатываю webapp (HTML5, чистый JavaScript, без JQuery), и это галерея изображений.

Изображения (большие пальцы) загружаются с использованием объекта изображения, а затем втягиваются в Canvas2D. Все отлично работает, но я заметил, что иногда на iPhone 6+ (iOS 8.1, Safari) некоторые из пальцев могут иметь черный толстый край внизу.

Изображение не запускает событие 'onerror', но всегда событие 'onload'.

Когда я распечатываю загруженный размер изображения в консоли, вызывается событие «onload», всегда ожидается размер 512x512 (все большие пальцы этого размера), независимо от того, появился ли черный маркер или нет. Изображение не сдвинуто вверх, на нем в основном отсутствуют пиксели внизу, заменены черными пикселями, как если бы загрузка JPG была прервана.

В галерее имеется около 40 больших пальцев, и эта проблема всегда проявляется на тех же 3 больших пальца, но не каждый раз, когда я загружаю галерею в iOS Safari. Скорее всего, около 3 из 10 шансов появится.

Этого никогда не бывает на устройствах Android или Windows/OSX.

код, который устанавливает объект изображения для загрузки:

this.itms[i].img.onload = onImageLoad; 
this.itms[i].img.onerror = onImageErr; 
this.itms[i].img.src = path_to_jpg_file; 

Где это "является галерея объект,«ITMS»является массивом элементов галереи,«IMG»является фактическим объектом изображения.

Когда событие «OnLoad» обжигают, следующий код будет использовать изображение в холст:

this._ctx.clearRect(0,0,this._ctx.canvas.width,this._ctx.canvas.height); 
this._ctx.drawImage(this.img,0,0,this.img.width,this.img.height,0,0,this._ctx.canvas.width,this._ctx.canvas.height); 
this.dtext(this.img.width + "x" + this.img.height); 

Где это "является галерея вещь объект,«_ctx»является canvas2D указатель на контекст и«DTEXT»является функция, которая будет выводить текст отладки в контексте canvas2D. Все большие пальцы имеют размер 512x512 на сервере, и при каждом загрузке изображения всегда отображается размер 512x512.

Объект изображения никогда не добавляется в тело документа, скорее он втягивается в canvas2D, который находится в теле документа. Причина этого заключается в том, что позже будет выполнен некоторый состав на холсте (некоторые визуальные эффекты).

Я не могу просто сканировать черные ряды пикселей внизу, так как есть некоторые большие пальцы, у которых много черных.

Неужели кто-нибудь сталкивался с подобной проблемой? Любые идеи о том, как обнаружить, если загруженное изображение имеет некоторые недопустимые пиксели, декодированные?

Answer 1

Вы можете использовать следующий скрипт

var image = new Image(); 

var imageSource = "http://website.com/image.jpg"; 

// image load event. 
image.onload = function() { 
    alert("image loaded"); 
}; 

// Now set the source. 
image.src = imageSource;