Question

我正在开发一个webapp（HTML5，纯JavaScript，没有JQuery），它是一个图像库。

使用Image对象加载图像（拇指），然后将其绘制到Canvas2D中。这一切都很有效，除了我注意到iPhone 6+（iOS 8.1，Safari）上的有时一些拇指底部可能有黑色粗边。

图像不会触发'onerror'事件，但始终会发生'onload'事件。

当我在控制台中打印出加载的图像大小时，在调用'onload'事件时，无论是否出现黑色边距，总是需要512x512大小（所有大拇指都在那个大小）。图像没有向上移动，它基本上在底部缺少像素，替换为黑色像素，就像JPG加载被中断一样。

画廊中大约有40个拇指，这个问题总是出现在相同的3个拇指上，但不是每次我在iOS Safari中加载图库。相反，它会出现大约三分之一的机会。

这在Android设备或Windows / OSX桌面上永远不会发生。

设置加载图像对象的代码：

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

'this'是gallery对象，'itms'是gallery项目数组，'img'是实际的Image对象。

当触发'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);

其中'this'是图库项目对象，'_ itx'是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;

检测是jpg图像正确加载

1 个答案: