如何在 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？另外，是否可以从客户端（即 javascript）调整这些 gif 的大小？

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

Answer 1

由于您的问题实际上包含多个问题，因此很难回答，因此我目前不会在此处包含代码。

---

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

具体来说，当 CanvasImageSource 对象表示 HTMLOrSVGImageElement 中的动画图像时，用户代理必须使用动画的默认图像（格式定义的图像将在不支持或禁用动画时使用），或者，如果没有这样的图像，动画的第一帧，当为 CanvasRenderingContext2D APIs 渲染图像时。

因此，您将无法在画布上渲染所有 gif 帧。

为此，您必须解析文件并提取文件的每一帧。

这里是一个未经测试的库，它确实提出了这个功能：
libgif-js。
如果你不喜欢库，你也可以自己写一个脚本。
_{edit:我试过这个库，它很糟糕......不要使用它，也许你可以fork 它，但它真的不是用来做图像处理的}

获得框架后，您可以使用画布调整它们的大小，然后将它们全部重新编码到最终的 gif 文件中。 未经测试，gif.js 似乎可以做到这一点。
_{也经过测试，不那么糟糕，但它不喜欢透明度，需要托管 js 文件，所以没有在线演示......可能还需要一个叉子......}

---

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

基本上，这些步骤是提取文件的前 4 位并根据幻数检查它。 'image/gif' 幻数是47 49 46 38。