如何在浏览器中通过Javascript压缩图像？

Question

在上传之前，有没有一种方法可以直接在浏览器端压缩图像（主要是jpeg，png和gif）？我很确定JavaScript可以做到这一点，但是我找不到实现它的方法。这是我要实现的完整方案：用户访问我的网站，然后通过input type="file"元素选择图片，该图片是通过JavaScript检索的，我们进行了一些验证，例如正确的文件格式，最大文件大小等，如果一切正常，则会在页面上显示图像的预览，用户可以执行一些基本操作，例如将图像旋转90°/ -90°，按照预定义的比例进行裁剪等，或者用户可以上传其他图像并返回步骤1，当用户满意时，然后将编辑的图像压缩并本地“保存”（不保存到文件中，而是保存在浏览器的内存/页面中），-用户使用姓名，年龄等数据填写表单，用户单击“完成”按钮，然后将包含数据和压缩图像的表单发送到服务器（不使用AJAX），直到最后一步的完整过程都应该在客户端完成，并且应该与最新的Chrome和Firefox，Safari 5+和IE 8+兼容。如果可能的话，应该只使用JavaScript（但我很确定这是不可能的）。我现在还没有编写任何代码，但是我已经考虑过了。可以通过File API在本地读取文件，可以使用Canvas元素完成图像预览和编辑，但是我找不到找到图像压缩部分的方法。根据html5please.com和caniuse.com的说法，要支持这些浏览器是非常困难的（由于IE），但是可以使用诸如FlashCanvas和FileReader之类的polyfill来实现。实际上，目标是减小文件大小，因此我将图像压缩作为解决方案。但是，我知道上载的图像将每次都在同一位置显示在我的网站上，并且我知道该显示区域的尺寸（例如200x400）。因此，我可以调整图像大小以适合这些尺寸，从而减小文件大小。我不知道这种技术的压缩率是多少。你怎么看 ？您有什么建议要告诉我吗？您知道在JavaScript中压缩图像浏览器端的任何方法吗？多谢您的回覆。

Answer 1

简而言之：

• 使用HTML5 FileReader API和.readAsArrayBuffer读取文件

• 使用文件数据创建e Blob，并使用window.URL.createObjectURL（blob）获取其url。

• 创建新的Image元素并将其src设置为文件blob url

• 将图像发送到画布。画布尺寸设置为所需的输出尺寸

• 通过canvas.toDataURL（“ image / jpeg”，0.7）从画布获取按比例缩小的数据（设置您自己的输出格式和质量）

• 将新的隐藏输入附加到原始表单，并基本上以普通文本的形式传输dataURI图像

• 在后端，读取dataURI，从Base64解码并保存

Answer 2

我想提供自己的解决方案。此Javascript函数采用图像数据URL和宽度，将其缩放到新的宽度，然后返回新的数据URL。

// Take an image URL, downscale it to the given width, and return a new image URL.

function downscaleImage(dataUrl, newWidth, imageType, imageArguments) {

    "use strict";

    var image, oldWidth, oldHeight, newHeight, canvas, ctx, newDataUrl;

    // Provide default values

    imageType = imageType || "image/jpeg";

    imageArguments = imageArguments || 0.7;

    // Create a temporary image so that we can compute the height of the downscaled image.

    image = new Image();

    image.src = dataUrl;

    oldWidth = image.width;

    oldHeight = image.height;

    newHeight = Math.floor(oldHeight / oldWidth * newWidth)

    // Create a temporary canvas to draw the downscaled image on.

    canvas = document.createElement("canvas");

    canvas.width = newWidth;

    canvas.height = newHeight;

    // Draw the downscaled image on the canvas and return the new data URL.

    ctx = canvas.getContext("2d");

    ctx.drawImage(image, 0, 0, newWidth, newHeight);

    newDataUrl = canvas.toDataURL(imageType, imageArguments);

    return newDataUrl;

}

可以在有数据URL并需要缩小图像尺寸的数据URL的任何地方使用此代码。