Как масштабировать изображение (в данных формат URI) в JavaScript (реальное масштабирование, не используя разрабатывающий)
Мы получаем видимую вкладку в браузере Chrome (при помощи расширений API chrome.tabs.captureVisibleTab) и получаем снимок в схеме URI данных (Base64 закодированная строка).
Существует ли библиотека JavaScript, которой можно пользоваться для уменьшения масштаб изображения до определенного размера?
В настоящее время мы разрабатываем его с помощью CSS, но должны заплатить потери производительности, поскольку изображения главным образом в 100 раз больше, чем необходимый. Дополнительное беспокойство является также нагрузкой на localStorage, который мы используем для сохранения наших снимков.
Кто-либо знает о способе обработать отформатированные изображения схемы URI этих данных и уменьши их размер путем уменьшения масштаба их?
Ссылки:
- Схема Data URI на http://en.wikipedia.org/wiki/Data_URI_scheme
- Расширения Chrome API на http://code.google.com/chrome/extensions/tabs.html
- "Недавно закрытые вкладки" расширение Chrome на http://code.google.com/p/recently-closed-tabs
2 ответа
Вот функция, которая должна делать то, что вам нужно. Вы даете ему 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;
}
Что касается проблем с производительностью, может быть, тег Canvas может помочь? https://developer.mozilla.org/en/Canvas_tutorial/Using_images#drawImage_example_2
Если вы загрузите изображение, отобразите его с помощью drawImage, а затем попытаетесь отбросить, возможно, у вас все получится. Но я не уверен, как сериализовать холст как изображение, чтобы сохранить файл с измененным размером ...