If I want to make my users upload their own photo, what should I do

How do I...?
1

As I have mentioned, I am working on a vision training game with my classmates. Our client has requested us to make a function to enable the users to upload their own background. I have already know how to do this in a web page using node.js, but I do not really know how to plug it in gdevelop. Is anyone here can help me to come up with a solution? Many thanks
Update1
My classmate show me this function and it can open the folder but cannot upload,var input = document.createElement(‘input’);
input.type = ‘file’;
input.accept = ‘image/*’; // 只接受圖片文件

// 2. 當用戶選擇圖片時執行的操作
input.onchange = function(event) {
var file = event.target.files[0]; // 獲取選擇的文件
var reader = new FileReader();

reader.onload = function(e) {
    var imgData = e.target.result;  // 讀取圖片的base64數據

    // 3. 將圖片數據存儲到GDevelop的全局變量中
    runtimeScene.getVariables().get("userSelectedImage").setString(imgData);

    // 4. 創建一個新的精靈物件來顯示這張圖片
    //var bgObject = runtimeScene.createObject("BackgroundSprite");
    //bgObject.setTexture(imgData);
    //bgObject.setPosition(0, 0);

    var bgObject = runtimeScene.createObject("BackgroundSprite");
    if (bgObject) {
        bgObject.setTexture(imgData);
        bgObject.setPosition(0, 0);
    } else {
        console.error("BackgroundSprite 對象未找到");
    }
};

reader.readAsDataURL(file);  // 將文件讀取為base64 URL

};

// 5. 模擬點擊文件選擇器來打開相機或圖庫
input.click();
And I give the solution Donna mentioned a try and it can change the background but not permanent. If we combine the two together we may find a solution, can anyone give me a hint?

4

We can brainstorming together, though I doubted whether I could help because I know so less about javascript or gdevelop

5

Hi, you could give this solution a try:

6

Riiiiight, actually I am researching on it to understand the code, hope it will be useful, many thanks

7

There is also an extension which may be easier to use:
Capture

8

Thank you for your help!

1 Like
10

well we plan to use Github

11

Hey Drona, I have tried the function, however when I use
runtimeScene
.getGame()
.getImageManager()
.getPIXITexture(eventsFunctionContext.getArgument(“截屏2024-08-10 16.12.46.png”))
.baseTexture = PIXI.BaseTexture.from(eventsFunctionContext.getArgument(“https://s2.loli.net/2024/08/10/V8wNQ7DoqgtjWnH.jpg”));
I found it actually failed to load the picture I want it load, instead it will load the original background, why will this happen, can you help me with it? I can’t express my gratitude if you can tell me where I did it wrong

12

Unfortunately I am not very experienced with javascript and pixi. If you use the extension mentioned above, you can load your image without writing a single line of javascript.

I have tried to load your image and it does not work (probably it is protected). To check if your javascript-code is okay, you need to use another picture.

1 Like
13

Strange enough because I can load it with the package, but it fails when I try to use the javascript, really thankful for you trying to help me.

1 Like
14

update, I found a package who allows to change base64 in picture and it works fine, but it will replace all the background in sprite instead of uploading a new one, still trying!