Как масштабировать изображение (в формате URI данных) в JavaScript (реальное масштабирование, не используя стиль)

Мы собираем видимую вкладку в браузере Chrome (с помощью расширения API chrome.tabs.captureVisibleTab) и получаем моментальный снимок в схеме URI данных (закодированная в Base64 строка).

Есть ли библиотека JavaScript, которая может использоваться для масштабирования изображения до определенного размера?

В настоящее время мы разрабатываем его с помощью CSS, но должны платить штрафы за производительность, поскольку изображения в основном в 100 раз больше, чем требуется. Дополнительным беспокойством является также нагрузка на localStorage, которую мы используем для сохранения наших снимков.

Кто-нибудь знает, как обрабатывать эти URI-схемы данных с отформатированными изображениями и уменьшать их размер, уменьшая их?

Литература:

Схема URI данных на http://en.wikipedia.org/wiki/Data_URI_scheme
API расширений Chrome на http://code.google.com/chrome/extensions/tabs.html
"Недавно закрытые вкладки" Расширение Chrome на http://code.google.com/p/recently-closed-tabs

Ответ 1

Здесь функция, которая должна делать то, что вам нужно. Вы указываете URL-адрес изображения (например, результат от chrome.tabs.captureVisibleTab, но это может быть любой URL-адрес), нужный размер и обратный вызов. Он выполняется асинхронно, потому что нет гарантии, что изображение будет загружено сразу же после установки свойства src. С URL-адресом данных, вероятно, будет, так как ему не нужно ничего скачивать, но я его не пробовал.

Обратный вызов будет передан результирующее изображение в виде URL-адреса данных. Обратите внимание, что полученное изображение будет PNG, поскольку реализация Chrome toDataURL не поддерживает изображение /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;
}

Ответ 2

Что касается проблем с производительностью, может быть, может помочь тег canvas? https://developer.mozilla.org/en/Canvas_tutorial/Using_images#drawImage_example_2

Если вы загрузите изображение, отобразите его с помощью drawImage, а затем попытайтесь его отменить, вы можете добиться успеха. Но я не уверен, как сериализовать холст в качестве изображения для сохранения файла с измененным размером...