Guardar imágenes en disco

Clase 24 de 52 • Curso de Electron: Apps de escritorio en Windows y Mac

Resumen

En el vídeo anterior obtuvimos la ruta del archivo que vamos a guardar, en ésta clase vamos a preparar el nombre del archivo y guardar la imagen.

Francisco Javier Rodriguez Gomez

student•

Saludos, quise jugar un poco con la aplicación y mostrar un message box, si guardaba satisfactoriamente el archivo. Aparte de otros cambios

La función se encuentra en ipcRendererEvents.js
Cambie la expresión regular
Envio un ipcRenderer.send() con la configuración del message box.

ubicación: \platzipics\src\renderer\ipcRendererEvents.js

ipcRenderer.on('save-file', (event, file) =>{
	// Verifivar que se recibió ruta y nombre
	// de archivo para guardar imagen
	console.log(file)
	let src = document.getElementById('image-displayed').src
	src = src.replace(/^[\w\W]+?;base64,/, '')
	fs.writeFile(file, src, 'base64', (err) => {
		if (err){
			console.log(err)
		} 
		else{
			console.log('Todo genial')
			ipcRenderer.send('message-box', {
				type: 'info',
				title: 'Guardar',
				message: 'Archivo guardado satisfactoriamente.',
				buttons: ["OK"], 
			})
		}
			
	})
})

El ipcMain ha de escuchar el mensaje ‘message-box’ y actuar en consecuencia, para ello en index.js se encuentra la función correspondiente.

Ubicación: \platzipics\src\index.js

ipcMain.on('message-box', (event, message) => {
  dialog.showMessageBox(win, message)  
})

Este es el resultado:

Matias Niz

student•

Cada vez que aplicamos un filtro, si queremos optar por otro filtro, se agrega al que elegimos la primera vez. Para evitar esto deberíamos volver a cargar la imagen original antes de aplicar el filtro.

Alonso Alejandro Zúñiga Beltrán

student•

Así es, en filters.js debemos cambiar

imgObj.src = currentImage.src
//por
imgObj.src = currentImage.dataset.original

Rafael Sabán Alcántara

student•

No se que ocurre pero al aplicar un filtro a la imagen, el src no cambia como si pasa en el vídeo, sigue manteniendo la ruta del archivo, por lo que el código posterior ya no me sirve porque el src no está en base64

Guardar imágenes en disco

Introducción a Electron

Paso a paso para construi aplicaciones con Electron

¿Qué es Electron?

¿Cómo funciona Electron?

Herramientas necesarias

Comenzando con Electron

Creando nuestro proyecto

Nuestra primera ventana

Propiedades de una ventana de Electron

Comenzando con nuestro aplicativo

El frontend y Electron

Configurando nuestro frontend

Herramientas de desarrollo para Electron

Algunos frameworks recomendados

Construyendo el layout

Completar elementos del Layout

Agregando interacción a nuestra aplicación

JavaScript en el frontend

Selecciona imágenes

Buscar imágenes

Añadir filtros a la imagen

Comunicación entre procesos

Accesando recursos de la máquina

Leer archivos de directorios

Generar listas de imagenes

Refactor del proyecto

Usando el diálogo de guardar

Guardar imágenes en disco

Usando cajas de mensajes

Detectando errores

Interactuando con el sistema operativo

Organizando el código del proceso principal

Múltiples ventanas y comunicación entre ellas

Creando assets para una nueva ventana

Consideraciones para múltiples plataformas

Manejo de preferencias

Usuario y contraseña

Creando un ícono en la bandeja del sistema

Imprimiendo

Subir una imagen

Portapapeles con texto o imágenes

Emitiendo notificaciones

Agregando un Menú

Atajos

Protocolos personalizados

Generando un ejecutable para nuestra aplicación

A tener en cuenta para generar ejecutables

Configurando el entorno para construcción

Configurando el entorno para construcción 2

Personalizando nuestro ejecutable

Creando paquetes para distribuir nuestro aplicativo

Considerando instaladores para múltiples plataformas

Firmas digitales con Code Signing

Cierre del curso

Bonus

Integración continua

Escribiendo tests con Ava y Spectron

Desafios

Crear un filtro personalizado

Leer las imágenes ubicaciones remotas (Cloudup)

Previsualización de filtros