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

Question

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

是否有JavaScript库可用于将图像缩小到特定大小？

目前，我们通过CSS进行样式设置，但必须支付性能惩罚，因为图片通常比所需的大100倍。另一个问题是我们用来保存快照的localStorage的负载。

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

参考资料：

- http://en.wikipedia.org/wiki/Data_URI_scheme上的数据URI方案 - http://code.google.com/chrome/extensions/tabs.html上的Chrome扩展API - http://code.google.com/p/recently-closed-tabs上的“最近关闭的选项卡”Chrome扩展程序

- Draško Kokić

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;
}

- Matthew Crumley

---

谢谢Matthew，非常干净的例子...我一定是上个晚上喝太多啤酒了，没能做到“完全”相同的工作...唯一的区别是我使用了HTML中现有的画布。 - Draško Kokić

这也仅仅缩放了图像，结果的 dataURL 和不使用 canvas.toDataURL() 时一样大（即使你已经用新的宽度和高度重新绘制了图像 :( )。 - Om Shankar

请注意，如果发现sourceIMage.onload没有被调用，则意味着您的输入URL数据有问题。对我来说，我正在使用FileReader()并执行readAsBinaryString而不是readAsDataUrl。 - bjm88

这个解决方案假设您不会超出设备的最大画布大小。我正在寻找一种可靠地在移动设备上实现此目标的方法。 - Eric Gratta

Answer 2

关于性能问题，也许可以使用canvas标签来解决？https://developer.mozilla.org/en/Canvas_tutorial/Using_images#drawImage_example_2。如果你加载图像，用drawImage显示它，然后尝试丢弃它，可能会成功。但我不确定如何将画布序列化为图像以保存调整大小后的文件...

- efi

---

您可以使用画布对象上的 toDataURL 方法对图像进行序列化。 - Matthew Crumley

@Matthew：哦，有趣。谢谢你的提示！ - efi

昨晚我在Mozilla开发者网站上尝试了这个例子，但是无法在画布上看到图片。有没有人有任何在Chrome上工作的示例呢？;-) - Draško Kokić