Guardar imágenes en disco

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

Contenido del curso

Introducción a Electron

Comenzando con Electron

Comenzando con nuestro aplicativo

Agregando interacción a nuestra aplicación

Interactuando con el sistema operativo

Generando un ejecutable para nuestra aplicación

Creando paquetes para distribuir nuestro aplicativo

Bonus

Desafios

Tomar examen

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.

Comentarios

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