获取畸形图像数据

Question

当浏览器意识到图像已损坏，而不是遵循 .jpg, .png 等）格式，浏览器会显示这个图标。

<img src="some_malformed_img.jpg" onerror="errorHandler()" id="Img1" />

在JavaScript中，我怎样才能得到畸形的图像数据？这是我尝试过的方法。

function errorHandler() {
  var c = document.createElement('canvas');
  var img = document.getElementById('Img1');

  c.height = someHeight             //Let's assume I know the height
  c.width = someWidth;              //Let's assume I know the width

  var ctx = c.getContext('2d');

  ctx.drawImage(img, 0, 0, c.width, c.height);

  var base64String = c.toDataURL(); //<---- This is empty :(
}

在这个例子中，我们假设服务器实际发送了文件 而只是浏览器确定文件是畸形的。

Answer 1

如果浏览器确定图像损坏，你将无法将其绘制到画布上，绘制和保存步骤可能不是无损的，所以你可能不会有服务器发送的相同数据。如果你真的想得到图片数据，只需做一个ajax请求。

function errorHandler() {
    fetch(document.getElementById('Img1').src)
    .then(function(response) {
        if (!response.ok) {
            throw new Error("HTTP error, status = " + response.status);
        }
        return response.arrayBuffer();
    })
    .then(function(image_data) {
    // do something with the image data
    });

}