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

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

14 голосов
/ 25 марта 2010

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

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

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

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

Ссылки:

Ответы [ 2 ]

20 голосов
/ 26 марта 2010

Вот функция, которая должна делать то, что вам нужно. Вы даете ему 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;
}
2 голосов
/ 25 марта 2010

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

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

...