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

Question

Мы захватываем видимую вкладку в браузере 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 «Недавно закрытые вкладки» для Chrome http://code.google.com/p/recently-closed-tabs

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

Answer 2

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

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