Question

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

我可以调整那些没有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上尝试相同的方法时，＆＃39;调整大小＆＃39;图像不再是GIF;它只是gif调整大小的第一帧。

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

那么，我如何确定图像是否是gif？此外，是否可以从客户端调整这些GIF的大小，即javascript？

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

Answer 1

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

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

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

所以你原本无法在画布上渲染所有的GIF帧。

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

这是一个未经测试的库，它提出了这个功能：
specs
如果你不喜欢图书馆，你也可以自己写一个剧本 _{编辑：我尝试了这个lib，它很糟糕......不能使用它，也许你可以分叉它，但它真的不是为了做图像处理}

一旦你获得了帧，你可以用画布调整它们的大小，然后在最终的gif文件中重新编码它们。 ~~未经测试libgif-js似乎能够做到这一点。~~
_{测试过，有点不那么糟糕但它不喜欢透明度，它需要托管js文件，所以没有在线演示...也可能需要一个分叉......} < / p>

最后，要回答标题问题，＆＃34; 如何检查文件的MIME类型＆＃34;，请检查此gif.js。

基本上，步骤是提取文件的4个第一位并根据魔术数字进行检查。 'image/gif'魔数是47 49 46 38。

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

1 个答案: