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
