如何在JavaScript中获取图像/ blob的MIME类型？

Question

我正在使用Chrome扩展程序，在其中调整用户右键单击的图像大小（实际调整大小;不更改浏览器显示）。当他们右击图像时，我可以访问图像的'src'。

我可以调整非GIF图像的大小;我使用画布来做到这一点。你可以看到我在这里做这个https://jsfiddle.net/cyqvacc6/6/。

img_url = 'https://i.imgur.com/SHo6Fub.jpg'; 
function get_image(image_url, emoji_name) { 
    var img_el = document.createElement('img'); 
    img_el.onload = function() { 
     canvas = img_to_canvas(img_el); 
     emoji_sized_canvas = emoji_sized(canvas); 
     document.body.appendChild(emoji_sized_canvas); 
    }; 
    img_el.src = image_url; 
} 

function img_to_canvas(img) { 
    canvas = document.createElement('canvas'); 
    canvas.width = img.width; 
    canvas.height = img.height; 
    canvas_ctx = canvas.getContext('2d'); 
    canvas_ctx.drawImage(img, 0, 0, canvas.width, canvas.height); 
    return canvas; 
} 

function emoji_sized(canvas) { 
    var target_dim = emoji_dimensions(canvas.width, canvas.height); 
    var factor = 2; 
    var canvas_long_side = Math.max(canvas.width, canvas.height); 
    var target_long_side = Math.max(target_dim.width, target_dim.height); 
    new_canvas = document.createElement('canvas'); 
    new_canvas_ctx = new_canvas.getContext('2d'); 
    if ((target_long_side === canvas_long_side)) { 
     // Return the image. 
     return canvas; 
    } else if (target_long_side > canvas_long_side * factor) { 
     // Increase the size of the image and then resize the result. 
     new_canvas.width = canvas.width * factor; 
     new_canvas.height = canvas.height * factor; 
     new_canvas_ctx.drawImage(canvas, 0, 0, new_canvas.width, new_canvas.height); 
     return emoji_sized(new_canvas); 
    } else if (canvas_long_side > target_long_side * factor) { 
     // Half the size of the image and then resize the result. 
     var width = new_canvas.width = canvas.width/factor; 
     var height = new_canvas.height = canvas.height/factor; 
     new_canvas_ctx.drawImage(canvas, 0, 0, new_canvas.width, new_canvas.height); 
     return emoji_sized(new_canvas); 
    } else { 
     // Resize the image in one shot 
     new_canvas.width = target_dim.width; 
     new_canvas.height = target_dim.height; 
     new_canvas_ctx.drawImage(canvas, 0, 0, new_canvas.width, new_canvas.height); 
     return new_canvas; 
    } 
} 

function emoji_dimensions(width, height) { 
    const MAX_SIDE_LENGTH = 128; 
    // Get the larger side 
    long_side = Math.max(height, width); 
    // Determine the scale ratio 
    // If the image is between 95% to 100% of the target 
    // emoji size, don't adjust it's size. 
    var scale; 
    if ((long_side >= 0.95 * MAX_SIDE_LENGTH) && (long_side <= MAX_SIDE_LENGTH)) 
    { 
     scale = 1; 
    } else { 
     scale = MAX_SIDE_LENGTH/long_side; 
    } 
    return { 
     'height': height * scale, 
     'width': width * scale 
    }; 
} 

不幸的是，我没有看到使用画布调整GIF尺寸的简单方法。当我在gif上尝试相同的方法时，“调整大小”的图像不再是gif;这只是gif调整后的第一帧。

我想我最终会发送GIF到服务器来调整它们的大小，但是为了做到这一点，我需要知道我正在处理的图像是否是动画的，而我不知道该怎么办。

那么，如何确定图像是否为gif？另外，是否可以从客户端调整这些gif，即javascript？

作为参考，我需要在字节大小和像素方面减少gif，即gif的高度和宽度都需要低于128像素，总字节大小小于64k。

Answer 1

由于您的问题实际上包含多个问题，所以很难回答，所以我现在不会在这里包含代码。

---

首先，画布API只能绘制通过<img>元件传递的任何动画图像的第一帧。根据specs。

具体地，当CanvasImageSource对象代表了HTMLOrSVGImageElement动画图像，用户代理必须使用的动画（该格式定义时，不支持动画被使用或禁用所述一个的默认的图像），或者，如果没有这样的图像，则为CanvasRenderingContext2D API渲染图像时，动画的第一帧。

所以你不会本能地在画布上渲染你所有的gif帧。

对于这一点，你必须解析文件和提取文件的每一个帧。

这里是一个未经测试的库，提出这种功能：
libgif-js。
如果你不喜欢图书馆，你也可以自己写一个脚本。
_{编辑：我想这lib和它的awfull ...不使用它，也许你可以叉它，但它确实不是为了做影像处理}

一旦你得到的帧，您可以使用画布调整这些大小，然后将它们全部重新编码到最终的gif文件中。 未经测试gif.js似乎能够做到这一点。
_{测试过，有点少awfull，但它不喜欢的透明度和它需要有文件主办的JS，所以没有在线演示...也可能会需要一个叉...}

---

最后，回答标题问题“如何检查文件的MIME类型”，检查这个Q/A。

基本上，步骤是提取您的文件的4个第一位，并检查它与魔法数字。 'image/gif'幻数是47 49 46 38。