我正在使用Chrome扩展程序,在其中调整用户右键单击的图像大小(实际调整大小;不更改浏览器显示)。当他们右击图像时,我可以访问图像的'src'。如何在JavaScript中获取图像/ blob的MIME类型?
我可以调整非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。