js检查图像是否截断/损坏数据

Question

我正在寻找如何检测图像数据被截断\损坏.例如这张图片:

数据图像不完整(它在IE上更有形,并且在firefox控制台中标注为警告),但是img.onerror没有被触发,而img.completed是真的.

演示:https://jsfiddle.net/7dd0ybb4/

var img = document.getElementById('MyPicture');

img.onerror = () => alert('error img');  
img.onload = () =>  console.log(img.complete); //true

img.src = "https://i.stack.imgur.com/nGkok.jpg";

我想要一种方法来了解这一点.如果图像有无效数据.

Answer 1

您可以将图像解码为字节数组：

var src = 'here comes your base64 data'
var imageData = Uint8Array.from(atob(src.replace('data:image/jpeg;base64,', '')), c => c.charCodeAt(0))

JPEG必须以字节FF D8开始并以FF D9结尾，因此我们检查创建的数组缓冲区的最后两个元素是否为255和217。请参见实时示例。

var imageCorrupted = ((imageData[imageData.length - 1] === 217) && (imageData[imageData.length - 2] === 255));

我们可以对PNG使用类似的检查（实时示例），该检查以包含以下字节序列的IEND块结尾：

// in hex: 00 00 00 00 49 45 4e 44 ae 42 60 82
var sequence = [0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130];