Cómo codificar una imagen nueva (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]
Te mostramos cómo guardar una imagen nueva en un archivo mediante un objeto BitmapEncoder. Si quieres realizar cambios en una imagen existente, consulta Cómo editar una imagen.
Lo que debes saber
Tecnologías
- Crear tu primera aplicación de Windows en tiempo de ejecución con JavaScript
- Windows.Storage.Pickers
- Windows.Graphics.Imaging
Requisitos previos
- Damos por hecho que sabes crear una aplicación de Windows en tiempo de ejecución básica con JavaScript. Para obtener más información, consulta el tema sobre cómo crear tu primera aplicación de Windows en tiempo de ejecución con JavaScript.
Instrucciones
Paso 1: Usar el selector de archivos para seleccionar un archivo de destino
El FileSavePicker permite al usuario seleccionar un archivo nuevo o existente del sistema. Una vez que obtienes el archivo del selector, puedes usarlo como destino para el BitmapEncoder.
En primero lugar, crea un nuevo objeto de selector de archivos, configura las opciones de tipo de archivo para admitir imágenes JPEG y muestra el selector al usuario.
// 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;
Nota Puedes agregar más extensiones al filtro de tipo de archivo. Consulta Windows.Storage.Pickers para obtener más información.
Nota Puedes obtener una lista de todos los codificadores y las extensiones de archivo admitidas al utilizar Windows.Graphics.Imaging.BitmapEncoder.getEncoderinfoEnumerator.
Paso 2: Crear un objeto de codificador para una imagen nueva
Una vez que tengas el archivo de destino, obtén una IRandomAccessStream con privilegios de acceso ReadWrite del archivo, que utilizarás para crear una instancia del BitmapEncoder. También debes determinar el identificador de codificador correcto para el tipo de archivo que selecciona el usuario. En este ejemplo solo se permiten imágenes JPEG, pero si permites varios tipos de archivos deberás cambiar según el parámetro FileType del archivo.
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) {
Nota Los identificadores de codificador integrado se encuentran disponibles como miembros estáticos de BitmapEncoder.
Si el usuario selecciona un archivo que ya existe como destino donde guardar, debes establecer IRandomAccessStream.size en 0 porque BitmapEncoder requiere que la secuencia de salida esté vacía.
Ahora tienes un BitmapEncoder que representa una imagen JPEG vacía.
Paso 3: Establecer algunos datos en el codificador
Ahora que tienes el objeto BitmapEncoder, puedes establecer metadatos y datos de píxeles y, además, controlar miniaturas y transformaciones como rotación y escala.
Este código establece una matriz de datos de píxeles trivial. Para obtener más información sobre las propiedades de imágenes y los metadatos, consulta Cómo escribir metadatos de imagen.
// 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
);
Nota Si creas un BitmapEncoder con el método CreateAsync, la información mínima que debes proporcionar para crear una imagen válida son datos de píxeles mediante el método SetPixelData.
Paso 4: Guardar los cambios en el archivo
Cuando terminas de editar el BitmapEncoder, debes descargar el codificador y cerrar la secuencia subyacente antes de usar el archivo. Si no lo haces, la imagen no se guardará y perderás los datos.
Por último, controla los posibles errores. Si intentas realizar una acción de codificación que no es compatible con el formato del archivo, o no es válida, obtendrás un error hasta que llames a FlushAsync. Es decir, FlushAsync presenta un error si intentas guardar una miniatura al establecer IsThumbnailGenerated en True en un formato como BMP (que no admite miniaturas).
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();
});
}
Nota Al llamar a la función FlushAsync, el codificador se guarda y debes volver a crear el codificador para realizar otras acciones. Si tienes previsto usar el codificador más adelante, no llames a FlushAsync hasta que termines con el codificador.