0
367
VisualizaçõesHow to upload image of profile in phaser js?
How to upload Image from local storage to phaser using rest apis ?
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
It depends what you mean exactly, do you want to upload the image to the server, where the phaser application is running, or should everything be kept locally?
- if you only need a local version, you could do this:
- load the image
- save it in the
localStorageof the browser (doesn't work on stackoverflow, code snipplets) :localStorage.setItem('profile', <image-data> ) - display the image (or from the
localStorage, if it was savedlocalStorage.getItem('profile', <image-data> ))
- if you need it to be uploaded to the server, the answer is a bit more complex and depends on the programming language on the server. But here is a pointer, for the client side: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#uploading_a_file
Here a short demo/proof-of-concept:
(without localStorage, since it doesn't work here)
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
Relatório
Responde à pergunta