Как редактировать изображение (HTML)
[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]
В этом разделе объясняется, как использовать BitmapEncoder для редактирования существующего изображения. С помощью BitmapEncoder вы можете применять такие преобразования, как масштабирование и обрезка, задавать метаданные и свойства, а также редактировать пиксели, сохраняя при этом все неотредактированные данные. Вы узнаете, как инициализировать BitmapEncoder с использованием исходных данных изображения, применять одну или несколько операций для редактирования изображения, а затем выполнять его сохранение с одновременным обновлением исходного файла.
Кроме того, можно использовать BitmapEncoder для создания нового изображения с нуля. Дополнительные сведения см. в разделе Кодирование нового изображения.
Что необходимо знать
Технологии
- Создание первого приложения среды выполнения Windows на JavaScript
- Windows.Storage.Pickers
- Windows.Graphics.Imaging
Необходимые условия
- Предполагается, что вы умеете создавать простые приложения среды выполнения Windows на JavaScript. Подробнее: Создание первого приложения среды выполнения Windows на JavaScript.
- Итак, у вас есть объект BitmapDecoder. Эта процедура описана в разделе Декодирование изображения.
Инструкции
Этап 1: Получение объекта декодера из исходного изображения
Запишите начало функции, получающей объект BitmapEncoder, инициализированный из файла изображения, который вы хотите отредактировать, и объект IRandomAccessStream, открытый из файла. В этом примере исходное изображение перезаписывается, поэтому вам нужно использовать поток, открытый с помощью привилегий ReadWrite.
function (decoder, fileStream) {
Примечание Инструкции по получению объектов декодера и потока см. в разделе Декодирование изображения.
При вызове метода OpenAsync убедитесь, что параметр FileAccessMode изменен на ReadWrite.
Этап 2: Инициализация объекта кодировщика для редактирования
Создайте объект InMemoryRandomAccessStream в качестве точки назначения для кодирования и объект BitmapEncoder, выполняющий перекодировку, с помощью метода CreateForTranscodingAsync.
Используйте InMemoryRandomAccessStream в качестве временного расположения для хранения закодированного файла. В противном случае декодер и кодировщик будут одновременно выполнять чтение и запись в один и тот же поток, что приведет к нарушению работы.
// Keep variables in-scope across multiple async
var memStream = new Windows.Storage.Streams.InMemoryRandomAccessStream();
var encoder;
Windows.Graphics.Imaging.BitmapEncoder
.createForTranscodingAsync(memStream, decoder).then(function (_encoder) {
encoder = _encoder;
Примечание Метод CreateForTranscodingAsync поддерживает копирование данных только в изображение того же формата, что и исходное. Он не позволяет выполнять преобразование из одного формата в другой.
Теперь у вас есть объект BitmapEncoder, инициализированный с использованием данных из исходного объекта BitmapDecoder.
Этап 3: Преобразование изображения
После получения кодировщика можно выполнять различные действия, включая настройку пиксельных и метаданных. В этом примере показаны масштабирование и поворот изображения с помощью метода BitmapTransform. Дополнительные сведения о настройке метаданных см. в разделе Запись метаданных изображения. Подробнее о настройке пиксельных данных см. в разделе Кодирование нового изображения.
// Scaling occurs before flip/rotation.
encoder.bitmapTransform.scaledWidth = 640;
encoder.bitmapTransform.scaledHeight = 480;
// Fant is a relatively high quality interpolation algorithm.
encoder.bitmapTransform.interpolationMode =
Windows.Graphics.Imaging.BitmapInterpolationMode.fant;
// Generate a new thumbnail from the updated pixel data.
// Note: Only JPEG, TIFF and JPEG-XR images support encoding thumbnails.
encoder.isThumbnailGenerated = true;
encoder.bitmapTransform.rotation =
Windows.Graphics.Imaging.BitmapRotation.clockwise90Degrees;
Примечание Если вы используете метод CreateForTranscodingAsync для создания объекта BitmapEncoder, то кодировщик попытается скопировать все исходные данные без потерь. К примеру, при перекодировке изображения в формате JPEG и изменении некоторых его свойств без применения каких-либо преобразований или редактирования пиксельных данных изображение копируется без потерь. Но если вы обрабатываете изображение, получая пиксельные данные из декодера и затем настраивая их в кодировщике, этот процесс всегда сопряжен с потерями, так как пиксельные данные должны быть перекодированы.
Этап 4: Запись результатов работы кодировщика на диск и обработка ошибок
После окончания работы с кодировщиком запишите результаты его работы на диск для завершения операции кодирования. Кроме того, нужно рассмотреть те ситуации, в которых формат изображения не поддерживает кодирование эскизов. Если вы уверены, что всегда будете редактировать формат изображения, поддерживающий эскизы (например, формат JPEG), тогда обработку ошибок можно пропустить.
return encoder.flushAsync();
}).then(null, function (error) {
switch (error.number) {
// If the encoder doesn't support writing a thumbnail, then try again
// but disable thumbnail generation.
case -2003292287: // WINCODEC_ERR_UNSUPPORTEDOPERATION
encoder.isThumbnailGenerated = false;
return encoder.flushAsync();
default:
throw error;
}
Этап 5: Сохранение закодированного изображения в файле и очистка
Наконец, скопируйте содержимое из потока в памяти в поток исходного файла и закройте все потоки.
}).then(function () {
// Overwrite the contents of the file with the updated image stream.
memStream.seek(0);
fileStream.seek(0);
fileStream.size = 0;
return Windows.Storage.Streams.RandomAccessStream.copyAsync(memStream, fileStream);
}).done(function () {
memStream.close();
fileStream.close();
});