如何在 JavaScript 中缩放图像（数据 URI 格式）（真实缩放，不使用样式）

Question

我们正在 Chrome 浏览器中捕获可见选项卡（通过使用扩展 API chrome.tabs.captureVisibleTab）并接收数据 URI 方案（Base64 编码字符串）中的快照。

是否有一个 JavaScript 库可用于将图像缩小到特定尺寸？

目前我们通过 CSS 对其进行样式设计，但由于图片大多比所需的大 100 倍，因此必须付出性能损失。另外一个问题是我们用来保存快照的 localStorage 上的负载。

有谁知道一种方法来处理这种数据 URI 方案格式的图片并通过缩小它们来减小它们的大小？

参考资料：

• 上的数据 URI 架构
• http://en.wikipedia.org/wiki/Data_URI_scheme Chrome 扩展程序 http://code.google.com/chrome/extensions/tabs.html
• http://code.google.com/ 上的“最近关闭的标签页”Chrome 扩展程序p/最近关闭的标签页

Answer 1

这是一个应该可以满足您需要的函数。您为其提供图像的 URL（例如，chrome.tabs.captureVisibleTab 的结果，但它可以是任何 URL）、所需的大小和回调。它以异步方式执行，因为不能保证在设置 src 属性时立即加载图像。使用数据 URL 可能会，因为它不需要下载任何东西，但我还没有尝试过。

回调将把生成的图像作为数据 URL 传递。请注意，生成的图像将是 PNG，因为 Chrome 的 toDataURL 实现不支持 image/jpeg。

function resizeImage(url, width, height, callback) {
    var sourceImage = new Image();

    sourceImage.onload = function() {
        // Create a canvas with the desired dimensions
        var canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;

        // Scale and draw the source image to the canvas
        canvas.getContext("2d").drawImage(sourceImage, 0, 0, width, height);

        // Convert the canvas to a data URL in PNG format
        callback(canvas.toDataURL());
    }

    sourceImage.src = url;
}

Answer 2

至于性能问题，也许画布标签可以帮助？ https://developer.mozilla.org/en/Canvas_tutorial/Using_images#drawImage_example_2

如果你加载图像，用drawImage显示它，然后尝试丢弃它，你可能会成功。但我不确定如何将画布序列化为图像以​​保存调整大小的文件......