0
371
ViewsHow to upload image of profile in phaser js?
How to upload Image from local storage to phaser using rest apis ?
·
Juan Pablo Isaza
1 answers
Answer question0
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
Report
Answer question