Кодировка нового изображения (HTML)
[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]
В этом разделе описывается сохранение изображения в файл с помощью объекта BitmapEncoder. Если необходимо внести изменения в существующее изображение, см. Редактирование изображения.
Что необходимо знать
Технологии
- Создание первого приложения среды выполнения Windows на JavaScript
- Windows.Storage.Pickers
- Windows.Graphics.Imaging
Необходимые условия
- Предполагается, что вы умеете создавать простые приложения среды выполнения Windows на JavaScript. Дополнительные сведения см. в разделе о создании первого приложения среды выполнения Windows на JavaScript.
Инструкции
Этап 1: Использование средства выбора файлов для выбора конечного файла
Средство FileSavePicker позволяет пользователю выбрать новый или существующий файл на своем компьютере. Получив файл из средства выбора файлов, его можно использовать в качестве конечного файла для объекта BitmapEncoder.
Первым делом создайте новый объект средства выбора файлов, задайте в параметрах типов файлов поддержку изображений в формате JPEG и отобразите средство выбора файлов для пользователя.
// variables to store objects across multiple async operations
var encoder;
var fileType;
var stream;
var picker = new Windows.Storage.Pickers.FileSavePicker();
picker.fileTypeChoices.insert("JPEG file", [".jpg"]);
picker.defaultFileExtension = "jpg";
picker.suggestedFileName = "untitled";
picker.pickSaveFileAsync().then(function (file) {
if (!file) {
// The user did not select a file.
return;
}
fileType = file. fileType;
Примечание В фильтр типов файлов можно добавить и другие расширения. Подробнее см. в разделе Windows.Storage.Pickers.
Примечание При помощи функции Windows.Graphics.Imaging.BitmapEncoder.getEncoderinfoEnumerator можно получить список всех поддерживаемых кодировщиков и расширений файлов.
Этап 2: Создание объекта кодировщика для нового изображения
После выбора конечного файла получите поток IRandomAccessStream с привилегиями доступа ReadWrite из файла, который будет использоваться для создания экземпляра объекта BitmapEncoder. Также необходимо определить правильный ИД кодировщика для типа файла, выбранного пользователем. В данном примере разрешены только изображения JPEG, так что для разрешения нескольких типов файлов необходимо переключение на основе параметра FileType файла.
return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
}).then(function (_stream) {
stream = _stream;
stream.size = 0;
var encoderId;
switch (fileType) {
case ".jpg":
encoderId = Windows.Graphics.Imaging.BitmapEncoder.jpegEncoderId;
break;
}
return Windows.Graphics.Imaging.BitmapEncoder.createAsync(encoderId, stream);
}).then(function (encoder) {
Примечание Встроенные идентификаторы кодировщика доступны как статические элементы объекта BitmapEncoder.
Если пользователь выбирает уже существующий файл для сохранения в него, необходимо установить IRandomAccessStream.size на 0, поскольку BitmapEncoder требует, чтобы поток вывода был пустым.
Теперь у вас есть объект BitmapEncoder, представляющий собой пустое изображение в формате JPEG.
Этап 3: Настройка данных в кодировщике
Настроив объект BitmapEncoder, вы можете задать метаданные и пиксельные данные, а также управляющие эскизы и преобразования, такие как вращение и масштабирование.
Код здесь задает обычный массив пиксельных данных. Подробнее о настройке свойств и метаданных изображения см. в разделе Запись метаданных изображения.
// An array representing 2x2 red, opaque pixel data
var pixels = [255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255];
encoder.setPixelData(
Windows.Graphics.Imaging.BitmapPixelFormat.rgba8,
Windows.Graphics.Imaging.BitmapAlphaMode.straight,
2, // pixel width
2, // pixel height
96, // horizontal DPI
96, // vertical DPI
pixels
);
Примечание Если вы создаете объект BitmapEncoder с помощью метода CreateAsync, то для создания допустимого изображения вам нужно как минимум предоставить пиксельные данные, используя метод SetPixelData.
Этап 4: Сохранение изменений в файле
Прежде чем использовать файл после завершения редактирования объекта BitmapEncoder, следует очистить кодировщик и закрыть лежащий в его основе поток. В противном случае изображение не сохранится и данные будут потеряны.
Наконец, устраните все ошибки. При попытке выполнить операцию кодирования, которая не поддерживается форматом файла или недопустима по иной причине, вы не получите сообщение об ошибке, пока не вызовете функцию FlushAsync. То есть ошибка функции FlushAsync возникает при попытке сохранить эскиз в таком формате, как BMP (который не поддерживает эскизы), заданием значения "True" для параметра IsThumbnailGenerated.
return encoder.flushAsync();
}).then(function () {
// This means the encoder saved successfully.
}, function (error) {
// There was an error encoding, error.message has the error string.
}).done(null, function () {
// Close the stream regardless of whether encoding was successful. Otherwise it will continue to be locked for Read/Write access.
stream && stream.close();
});
}
Примечание При вызове функции FlushAsync кодировщик сохраняется, и для выполнения других действий его необходимо создать повторно. Если вы планируете использовать кодировщик позже, не вызывайте FlushAsync до тех пор, пока не закончите его использовать.