Unity – Load a JPG local resource or www and apply to Texture or to UI Image

Hi Nice people!
Today I’ll talk about load a JPG image from an external source and use it in your games or apps, so let’s start!
First we have to stop watching image with eyes… I mean… now we’ll watch our full of color world as Neo of Matrix, we’ll see a sequence of bytes dropping everywhere

If you convert an image to byte array you will get something like that:

0x89,0x50,0x4E,0x47,0x0D,0x0A,0x1A,0x0A,0x00,0x00,0x00,0x0D,0x49,0x48,0x44,0x52,
0x00,0x00,0x00,0x40,0x00,0x00,0x00,0x40,0x08,0x00,0x00,0x00,0x00,0x8F,0x02,0x2E,
0x02,0x00,0x00,0x01,0x57,0x49,0x44,0x41,0x54,0x78,0x01,0xA5,0x57,0xD1,0xAD,0xC4,
0x30,0x08,0x83,0x81,0x32,0x4A,0x66,0xC9,0x36,0x99,0x85,0x45,0xBC,0x4E,0x74,0xBD,
0x8F,0x9E,0x5B,0xD4,0xE8,0xF1,0x6A,0x7F,0xDD,0x29,0xB2,0x55,0x0C,0x24,0x60,0xEB,
0x0D,0x30,0xE7,0xF9,0xF3,0x85,0x40,0x74,0x3F,0xF0,0x52,0x00,0xC3,0x0F,0xBC,0x14,

… etc …

This is the way used by Unity to see the images O.O

Let’s go on with practice, theory is boring :p

Load local JPG and apply to GameObject-Material-MainTexture

1. Create a Scene with a Cube and attach the script below:

2. c# script

using UnityEngine;
using System.Collections;
using System.IO; // namespace to use File.ReadAllBytes

public class LoadLocalTexture : MonoBehaviour {

	string filePath;        // it is as "D:/Unity/Photo-Voodoo/FotoTest/img1.jpg"

	public byte[] fileData; // load data inside a byte array 0x89,0x50,0x4E,0x47,0x0D...

	public void Start() {

		 filePath = "D:/MyFolder/img1.jpg";                   // the path of the image
		 fileData = File.ReadAllBytes(filePath);              // 1.read the bytes array
		 Texture2D tex = new Texture2D(2, 2);                 // 2.create a texture named tex
		 tex.LoadImage(fileData);                             // 3.load inside tx the bytes and use the correct image size
		 GetComponent<Renderer>().material.mainTexture = tex; // 4.apply tex to material.mainTexture 
	}// END Start
	
	void Update () {
	
	}// END Update()
}// END Mono

Load local JPG and apply to UI Image

1. Create a Scene with a UI Image and attach the script below:

2. c# script

using UnityEngine;
using System.Collections;
using UnityEngine.UI; // namespace to use UI
using System.IO; // namespace to use File.ReadAllBytes

public class LoadLocalTextureToImageUI : MonoBehaviour {

	string filePath;        // it is as "D:/Unity/Photo-Voodoo/FotoTest/img1.jpg"
	public byte[] fileData; // load data inside a byte array 0x89,0x50,0x4E,0x47,0x0D...

	public Image imageToDisplay; // Assign in Inspector the UI Image

	// Use this for initialization
	void Start () {

		filePath = "D:/MyFolder/img1.jpg";                   // the path of the image
		fileData = File.ReadAllBytes(filePath);              // 1.read the bytes array
		Texture2D tex = new Texture2D(2, 2);                 // 2.create a texture named tex
		tex.LoadImage(fileData);                             // 3.load inside tx the bytes and use the correct image size 
		Rect rec = new Rect(0, 0, tex.width, tex.height);    // 4.create a rect using the textute dimensions
		Sprite spriteToUse = Sprite.Create(tex,rec,new Vector2(0.5f,0.5f),100); //5. convert the texture in sprite
		imageToDisplay.sprite = spriteToUse;                 //6.load the sprite used by UI Image
	}// END Start()
	
	// Update is called once per frame
	void Update () {
	
	}// END Update()
}// END Mono

3. Assign in Inspector the UI Image to imageToDisplay variable

Load www JPG and apply to UI Image

1. Create a Scene with a Cube and attach the script below:

2. c# script

using UnityEngine;
using System.Collections;
using UnityEngine.UI; // namespace to use UI

public class LoadwwwTextureToImageUI : MonoBehaviour {

	public Image imageToDisplay; // Assign in Inspector the UI Image
	public string addressWeb = "http://www.lucedigitale.com/img1.jpg";

	// Use this for initialization
	void Start () {

		StartCoroutine(isDownloading(addressWeb)); 

	}// END Start()
		

	IEnumerator isDownloading(string url){
		yield return new WaitForSeconds(1); // wait for one sec, without it you will have a compiiler error
		
		
		var www = new WWW(url); // 1.start a download of the given URL           
		yield return www;       // 2.wait until the download is done
                                        // 3.create a texture in DXT1 format
		Texture2D texture = new Texture2D(www.texture.width, www.texture.height, TextureFormat.DXT1, false);
		                        
		www.LoadImageIntoTexture(texture); //4.load data into a texture
		Rect rec = new Rect(0, 0, texture.width, texture.height); //5.create a rect using texture dimensions
		Sprite spriteToUse = Sprite.Create(texture,rec,new Vector2(0.5f,0.5f),100); // 6.convert the texture to sprite
		imageToDisplay.sprite = spriteToUse; //7.change the sprite of UI Image

		www.Dispose(); //8.drop the web connection NOTE: Unity drop automatically the connection at the end of the download, but we put it as a precaution

		www = null;

	}// END IEnumerator

	void Update () {
	
	}// END Update()

}// END Mono

3. Assign in Inspector the UI Image to imageToDisplay variable

I hope this article has been helpful, greetings

Reference: https://docs.unity3d.com/ScriptReference/Texture2D.LoadImage.html
Reference: http://answers.unity3d.com/questions/1122905/how-do-you-download-image-to-uiimage.html