Question

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

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

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

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

参考文献：

http://en.wikipedia.org/wiki/Data_URI_scheme
http://code.google.com/chrome/extensions/tabs.html
http://code.google.com/p/recently-closed-tabs

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

至于性能问题，也许canvas标签有帮助吗？ https://developer.mozilla.org/en/Canvas_tutorial/Using_images#drawImage_example_2

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

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

2 个答案: