Webgl app that loads user image

Unity Engine
1

Following this thread How do I let the user load an image from their harddrive into a WebGL app? - Unity Engine - Unity Discussions I’m trying to develop an app that lets the user load his own image from his local hard drive.

This is the code and while it works when in Unity, it doesn’t when I build the project and run it on Firefox.
It lets me pick the image from my hd but it doesn’t actually apply the texture on the gameObject called “PlaneLogo”.

I guess the method ImageUploaderCaptureClick () loads the image but then I’m obviously missing something.

using UnityEngine;
using System.Collections;
using System.Runtime.InteropServices;

public class LoadImage : MonoBehaviour
{


    [DllImport("__Internal")]
    private static extern void ImageUploaderCaptureClick();
    private Texture2D displayedTexture;

    IEnumerator LoadTexture(string url)
    {
        WWW image = new WWW(url);
        yield return image;
        image.LoadImageIntoTexture(displayedTexture);
    }

    void FileSelected(string url)
    {
        StartCoroutine(LoadTexture(url));
    }

    public void OnButtonPointerDown()
    {
#if UNITY_EDITOR
        string path = UnityEditor.EditorUtility.OpenFilePanel("Open image", "", "jpg,png,bmp");
        if (!System.String.IsNullOrEmpty(path))
            FileSelected("file:///" + path);
#else
        ImageUploaderCaptureClick ();
#endif
    }

    void Start()
    {
        displayedTexture = new Texture2D(1, 1);
        GameObject.Find("PlaneLogo").GetComponent<MeshRenderer>().material.mainTexture = displayedTexture;
        GameObject.Find("PlaneLogo").GetComponent<Renderer>().enabled = true;
    }
}

And here’s the event trigger

1024×609 73.6 KB

2

yes, apply the new texture to the object.

IEnumerator LoadTexture(string url)
    {
        WWW image = new WWW(url);
        yield return image;
        image.LoadImageIntoTexture(displayedTexture);
        //apply texture to the object
        GameObject.Find("PlaneLogo").GetComponent<MeshRenderer>().material.mainTexture= displayedTexture;
    }
3

Hello Muteking.

As I can see from the screenshot (by the way, thank you very much for attaching it), you have your LoadImage script attached to the Main Camera object, while the jslib loader plugin from the original example sends a message to the Canvas object:SendMessage('Canvas', 'FileSelected', URL.createObjectURL(event.target.files[0]));
So you should be able to see a corresponding message in the browser console, informing you about this mismatch. You can therefore attach the script to the Canvas (don’t forget to remap the event), or change the jslib plugin code appropriately.

P.S. a small note about the comment from sumpfkraut above: no, you do not have to do that, you can assign the texture to the material just once, after that any changes in the texture will be immediately reflected in the associated material.

1 Like
4

That was exactly the problem, Alex. Thanks.