Как масштабировать изображение (в формате URI данных) в JavaScript (реальное масштабирование, не используя стиль)
мы захватываем видимую вкладку в браузере Chrome (с помощью расширений API chrome.вешалки.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
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, а затем пытаетесь отбросить его, вы можете добиться успеха. Но я не уверен, как сериализовать холст как изображение, чтобы сохранить измененный файл...