如何在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扩展程序

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