Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice

Question Convert JPG image to a texture/sprite in WebGL

Discussion in 'Web' started by FelixRouleau, Oct 4, 2023.

  1. FelixRouleau

    FelixRouleau

    Joined:
    Apr 18, 2023
    Posts:
    1
    I’m building an app in WebGL, where one of the required feature is to be able to take an image from your computer and put that image onto a card.

    The file upload process is working perfectly and I can convert that image into a texture and then into a sprite and apply it to the card.

    Here is the code used when the file uploader process has been completed and I have a sprite I can use.

    IEnumerator UploadImage(string path)

    {

    // This is where the texture will be stored.

    Texture2D texture;



    // using to automatically call Dispose, create a request along the path to the file

    using (UnityWebRequest imageWeb = new UnityWebRequest(path, UnityWebRequest.kHttpVerbGET))

    {

    // We create a "downloader" for textures and pass it to the request

    imageWeb.downloadHandler = new DownloadHandlerTexture();



    // We send a request, execution will continue after the entire file have been downloaded

    yield return imageWeb.SendWebRequest();



    // Getting the texture from the "downloader"

    texture = ((DownloadHandlerTexture)imageWeb.downloadHandler).texture;

    }


    // Create a sprite from a texture and pass it to the selected card image

    _uploadedImageSprite = Sprite.Create(

    texture,

    new Rect(0.0f, 0.0f, texture.width, texture.height),

    new Vector2(0.5f, 0.5f));

    // Print image filename

    Debug.Log("Selected File Name: " + Path.GetFileName(path));

    string imageName = Path.GetFileName(path);


    CardEditor.Instance.OnImageUploaded(_uploadedImageSprite, imageName);




    }


    The issue I’m having is that this app is multiplayer (I’m using Mirror for the networking processes). So I need to synchronize the new image to all the connected clients.

    To achieve this, once the image has been uploaded from the user computer I save it in a folder on my Linux VM, I then initiate a command to all the clients to tell them the image has changed and is now available, so all clients ask the server for the new image to apply it to the card.

    That process is working, I’m correctly receiving the image from the server. I’ve saved it onto my computer and I can open it no problem. But I’m unable to convert this byte array into a texture and the into a sprite to apply it to the card.

    I’ve tried in both my editor and in a browser tab.


    At first I thought it might be related to my byte array not being of a type supported for the texture.LoadImage, but after some test I know it's a proper JPG byte array.

    Maybe it's an issue related to the way the image is received in a browser, but I've tried it in the Unity Editor too and it's not working either.

    I've tried creating a texture with the default values, didn't work. Texture2D texture = new Texture2D(2, 2);

    I'm not getting any error message about the texture.LoadImage or the Sprite.Create, but both are empty.


    Here is the code pertaining to the issue I’m having.


    [Client]

    public void NotifyImageUploadComplete(ImageUploadIDMessage message)

    {



    Debug.Log("Dowload ID = " + message.downloadId + " Last Download ID = " + lastDownloadId);

    if (isImageUploadComplete || message.downloadId <= lastDownloadId)

    return;


    // Update the lastUploadId to avoid processing duplicate notifications

    lastDownloadId = message.downloadId;

    Debug.Log("Received all image chunks");

    Debug.Log("Number of chunks = " + receivedChunks.Count);

    // Image upload is complete, reconstruct the image

    byte [] downloadData = receivedChunks.SelectMany(chunk => chunk).ToArray();




    // Mark image upload as complete

    isImageUploadComplete = true;


    Texture2D texture = new Texture2D(2, 2, TextureFormat.RGB24, false);

    texture.LoadImage(downloadData);


    // Create a sprite from the texture

    Sprite sprite = Sprite.Create(texture, new Rect(0, 0, texture.width, texture.height), new Vector2(0.5f, 0.5f));

    sprite.name = _currentPhotoName;

    Debug.Log("Sprite name = " + sprite.name);

    _myPhoto.sprite = sprite;

    // Start a coroutine to reset the upload status after a short delay

    if (!isProcessingImageUpload)

    {

    StartCoroutine(ProcessImageUploadComplete());

    }




    }


    If you need any more info regarding the problem, please message me. I've been trying to fix this issue for a while.
     
  2. CodeSmile

    CodeSmile

    Joined:
    Apr 10, 2014
    Posts:
    6,639