javascript - 如何使用JavaScript缩放图像(数据URI格式)(实际缩放，不使用样式)

我们正在捕获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 ojit_a上的“最近关闭的标签页” Chrome扩展程序

最佳答案

这是应该执行您需要的功能。您为其提供图片的网址(例如chrome.tabs.captureVisibleTab的结果，但可以是任何网址)，所需的大小和回调。它异步执行，因为不能保证在设置src属性时立即加载图像。有了数据URL，它可能会因为不需要下载任何东西而已，但是我没有尝试过。

回调将通过结果URL作为数据URL传递。请注意，由于Chrome的toDataURL实现不支持图片/ jpeg，因此生成的图片将为PNG。

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

关于javascript - 如何使用JavaScript缩放图像(数据URI格式)(实际缩放，不使用样式)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2516117/