如何规模的图象(在数据URI格式)JavaScript的(真实的扩展、不使用定型)

Question

我们是捕获一个可见的标签，在一个浏览器(通过使用扩展API。标签。captureVisibleTab)，并接收个快照在数据URI方案(Base64编码string)。

是否有一个JavaScript库，可用于缩小的图像的某种尺寸？

目前，我们正在造型它通过CSS，但必须支付惩罚性能为照片是大多100倍，大于所需。另外的关切也是载于本地存储我们用来拯救我们的快照。

任何人都不会知道的一种方式来处理此数据URI方案格式的照片，并降低它们的尺寸通过缩放他们下来吗？

参考文献：

• 数据URI方案上 http://en.wikipedia.org/wiki/Data_URI_scheme
• 铬的扩展API上 http://code.google.com/chrome/extensions/tabs.html
• "最近关闭的标签"铬延 http://code.google.com/p/recently-closed-tabs

Answer 1

这里有一个功能应该做你需要什么。你给它的网址图像(如结果从 chrome.tabs.captureVisibleTab, 但它可能是任何URL)，所需的尺寸，并回调。它异步执行，因为没有保证图像将被载入立即设置 src 财产。有一个数据URL它可能会因为它并不需要下载任何东西，但我还没有尝试过。

回调会通过了所得到的图像作为数据的网址。注意，所得的图像将PNG，因为铬的执行情况 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然后试着放弃它，你能成功。但我不知道该如何serialize一帆布作为图象节省的调整文件...