0
368
Vistas¿Cómo subir imagen de perfil en phaser js?
¿Cómo cargar una imagen desde el almacenamiento local a Phaser usando Rest Apis?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Depende de lo que quiera decir exactamente, ¿quiere cargar la imagen en el servidor, donde se ejecuta la aplicación Phaser, o todo debe mantenerse localmente?
- si solo necesita una versión local, puede hacer esto:
- carga la imagen
- guárdelo en el
localStoragedel navegador (no funciona en stackoverflow, fragmentos de código) :localStorage.setItem('profile', <image-data> ) - mostrar la imagen (o desde
localStorage, si se guardólocalStorage.getItem('profile', <image-data> ))
- si necesita que se cargue en el servidor, la respuesta es un poco más compleja y depende del lenguaje de programación en el servidor. Pero aquí hay un puntero, para el lado del cliente: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#uploading_a_file
Aquí una breve demostración/prueba de concepto:
(sin localStorage , ya que no funciona aquí)
document.body.style = 'margin:0;'; var currentScene; var profileImage; var config = { type: Phaser.AUTO, width: 536, height: 173, scene: { create }, banner: false }; function create () { let message = this.add.text(10,10, 'Select a Image'); currentScene = this; } new Phaser.Game(config); let imgElement = document.querySelector('#localImage'); imgElement.addEventListener('change', _ => { const [file] = imgElement.files if (file) { var reader = new FileReader(); reader.onload = function(e) { var img = new Image(); img.onload = _ => { let txt = currentScene .textures .createCanvas('profile', img.width, img.height); txt.draw(0, 0, img); profileImage = currentScene.add .image(20, 40, 'profile') .setOrigin(0); profileImage.setScale(180 / img.height); } img.src = reader.result; } reader.readAsDataURL(file); } }) <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script> <input accept="image/*" type='file' id="localImage" />
·
Juan Pablo Isaza
Denunciar
Responde la pregunta