How to load image through byte array using Glide?

Question

I have an image contents byte[] form. But when i load them through Glide then broken images are shown. what I'm doing is shown below.

Glide.with(context)
    .load(imageByteArray)
    .asBitmap()
    .placeholder(R.drawable.ic_broken)
    .into(rowImageView);

imageByteArray successfully converts to bitmap without using glide. So there is no wrong with image byte array.

Please guide me what I'm missing?

Also I'm using Glide library com.github.bumptech.glide:glide:3.6.1 And Android support library com.android.support:support-v13:23.0.1

Edited

Ok, This is what I'm doing.

String imageBytes = "HVao14fpmtHSev3OgsrQNsawkFzXNcY3BsfQla6..."

This string above defined is bytes of actual image which I'm receiving from web API.

I'm converting this String into byte array like this

public static byte[] hexStringToByteArray(String s) {
        int len = s.length();
        byte[] data = new byte[len / 2];
        for (int i = 0; i < len; i += 2) {
            data[i / 2] = (byte) ((Character.digit(s.charAt(i), 16) << 4)
                    + Character.digit(s.charAt(i+1), 16));
        }
        return data;
}

Than I'm applying resultant byte array "imageByteArray" to Glide code defined above.

prolly, because you do not understand basics of multithreading ... but it is just blind guess ... as you did not provide how you obtain this byte array ... what is a scope of this variable is it used in some kind of loops .... — Selvin, Jan 04 '16 at 10:27
I do understand. Instead of giving these type of comments please guide me with proper answer. Thanks — Adnan Amjad, Jan 04 '16 at 10:29
then please ask the proper question ... as this code does provide a NOT broken image form me (I used code from your question and libraries from the question) — Selvin, Jan 04 '16 at 10:30
It is written in the question that imageByteArray successfully converts to bitmap without using glide. for details, imageByteArray came from web API. which sends image in byte array — Adnan Amjad, Jan 04 '16 at 10:33
hehe "I do understand" ... no you don't ... => with "your understanding" of multithreading both examples (with and without glide) should have the same results: http://ideone.com/7myeJE but as you can see thay has not ... — Selvin, Jan 04 '16 at 10:57

score 83 · Accepted Answer · edited Dec 16 '22 at 07:40

83

Lets say your base64 string is

String imageBytes = "HVao14fpmtHSev3OgsrQNsawkFzXNcY3BsfQla6..."

You should convert imageBytes String to array of bytes through

byte[] imageByteArray = Base64.decode(imageBytes, Base64.DEFAULT);

afterwards pass this imageByteArray to Glide.

Glide.with(context)
    .asBitmap()
    .load(imageByteArray)
    .placeholder(R.drawable.ic_broken)
    .into(rowImageView);

edited Dec 16 '22 at 07:40

htafoya

18,261
11
80
104

answered Jan 10 '16 at 07:09

Adnan Amjad

2,553
1
20
29

2

@Andan Amjad I have this same issue , i tried this snippet, but showing error, can not resolve .asBitmap() , can you help me? – Jack Aug 10 '17 at 06:52
3

@AmitVerma which Glide version you are using? if it is below 5 then use .asBitmap() right after .with() – Adnan Amjad Sep 05 '18 at 08:41
1

if I have list of images then this gets very slow – Aalap Patel Mar 01 '19 at 18:42
`.asBitmap()` what is that and why do we need it? – user924 Dec 02 '21 at 08:34
I tested without `.asBitmap()` and it works fine – user924 Dec 02 '21 at 08:44
Somehow it doesn't work if placeholder is not set, it seems to be a requirement to work. – htafoya Dec 16 '22 at 08:11

score 13 · Answer 2 · answered Sep 09 '16 at 14:02

13

You can convert Base64 String to image using the following

Glide.with(context)
    .load(Base64.decode(base64ImageString, Base64.DEFAULT))
    .asBitmap()
    .placeholder(R.drawable.ic_broken)
    .into(rowImageView);

answered Sep 09 '16 at 14:02

Anudeep Samaiya

1,910
2
28
33

5

what is different on your answer comparing to accepted one?! – Tima Dec 01 '17 at 10:48
3

Nothing, he just makes one less variable- – Mikkel Larsen Feb 08 '18 at 12:37

score 8 · Answer 3 · answered Jan 31 '19 at 14:26

8

Kotlin way:

val imageByteArray = Base64.decode(sampleBase64ImageString, Base64.DEFAULT)
Glide.with(this).load(imageByteArray).into(imageView)

answered Jan 31 '19 at 14:26

B. León

529
7
12

score 6 · Answer 4 · answered Nov 17 '18 at 08:41

6

If you are getting error on .asBitmap() just use it like this

             Glide.with(this)
                .asBitmap()
                .load(imageAsBytes)
                .into(image)

answered Nov 17 '18 at 08:41

Zohab Ali

8,426
4
55
63

score 1 · Answer 5 · answered Aug 04 '20 at 11:21

1

I do it a bit differently

byte[] bytes = Glide.with(context)
                        .as(byte[].class)
                        .load(url)
                        .submit()
                        .get();

The bytes are ready for file writing.

answered Aug 04 '20 at 11:21

Hassi

120
8

score 0 · Answer 6 · answered Aug 11 '22 at 13:18

Example of a Base 64 JPEG image

String dataImage = "/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxAREBUQEBIWFRUVFhAXFhUWFRUQFxcVFxUWFxUXFRYYHSggGBolGxUXIjEhJSkrLi4uFx8zODMtNygtLisBCgoKDQ0OFQ8PFSsZFR0tKysrLTcrNzcrNysrKy0rLTcrKystKy0rLSstKy03LS0rKystKysrKysrKysrKysrK//AABEIAPYAzQMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABAUBAgMGB//EADgQAAIBAgQDBgMGBwADAAAAAAABAgMRBBIhMQVBURMiYXGBkQYy0VKhscHh8BQjM0JicpKCovH/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAQL/xAAWEQEBAQAAAAAAAAAAAAAAAAAAEQH/2gAMAwEAAhEDEQA/APqAANsgAAAAAAAAAAAAAAAAMZltcyAAAAAAAAAAAAAAAAAAAAAAAAAAAAG0YN7FTxjF16ekabivt/MvS23qFXFOk39SLxbh9acf5M7afL8rflLkecwnF69Pad091LvL9PQvsB8R05WVVZH13j9USjzOIw9Wm+/GUX1d9/B7MuOD8TcrU6m/KXXwZ6VOFSP9sovykih4xwzDU++punLdRXfu/CO697AWQIvD8S6lOMnu739HYlFQAAAAAAAAAAAAAAAAAAAA4wxlHPklUSf3eV9kB1lJJXeiXXQqcZxuMdKaUn1e36npIQi1pZp+Uk/qVeM+HqM9Y3g/8fl9n+ViVWvD/iCjLSa7N+OsX68vUuIyjJaNNPpZo8ZjeDVqWrWaP2o3fuuRFwuKqU3enJx62ej81swPVY3gFGo7pOD/AMbW9Y/SxQcR4NUopydpRX9y090TIfFEstnTTl1u1H1X6kKSr4l5py7vLkl/rECDh8ROEr024vbTd+FifS4bObzVZPXV85P6FjhMDGHyrXq9yZGmWDXDUlCKjFWSJBrsbNNWb57BAAAAAAAAAAAAAAANoQb2A1OlOi34FHxjF1oPLkcF9re/k1oQ8DxetS0Us0fsy1+/dBXpcdw11I5Y1JQfhqn58zy+O4TVpayjeP2lqvXp6noMH8QUp6TTg+r1j7/Ut4STV0011TuQeEweNqUnenJrw3T9C9wvxJF6VYNf5R1XtyJHGcNhbZqrUH1jpJ+i+Y8jJuUstO7XLSza8uQHssZxyhTjdSzt7KO/r0PMYqtUxM7qCXLRJJeb5nbB8I51P+V+bLilTSSSWnJIQV+D4VGOsu8/uX1LOMDhicbTp6SevRav9CZwefaw7RxsrtRu90t2/X8CjDsk3ySbb5JLe5WYnjkFpBOb/wCV95N+KcTkoqmt5u1v8Vq/vsvUo/h/B9pWjdd2Pefpsvf8CUewwtG0VmSzWWbz5pHnfiLiDVeCi/6er6Znuvay9T0uIrKEXOW0U2zwNSUpycpayk7vzYHrqVRSSktmro3OGFjCMYwi72ir9M3O3XU7lAABAAAAAAAAA71KuRKMY3fN3svU4Gmdtu+9166DVdf43lUgrdV3l6pojYvglGqs1N5X/jZx9Y8vQRnK9r3WuuXK14ePn4GcrTzQeV9Vs/NEFHjuE1aSzSScftJ3909SDS4lUp/05Sj66e2xYcWoYipO9Say8uUV6ClQoUdW05f9P0S2AiUcFVrPPUbV+b1b8lyLihh6dKOlorq+fm2W+GwMbJyu3ZO3TwPLcexPaVmovux7semm7Xrf2AuOH14VamSN3ZNtray/VlpiJxo05Tt8qb83yXuV/wAL4TJS7R7zf/qrpfm/U4/FeJ0jSXN5n5K6S97v0A83GEpytvKT923+p7/C0FThGnHaKS+rPK/D9KPa9pNpKC585PRW+/7i9xHEbpqmutpPS3ilu/uA87x7EdpXl0j3V6bv3uWXw/UhSpuTu5Sey1eVbX5LW/PoR6PD4R37z8dvYlRjYDrjq8q0XBrLF2vbVuzulfZaojUsPCO0V58/fc6gDMXZ3JqZBO+GqX06DB3ABUAAAAAAAADlPSSfXT1Wq/M6nPELu6brVemoVi4uauWl9fSyfpfmaxk923yteydursQbzlZXabXVWaXg1uQqvD4ZlOKSkmn4O2uqGIxtKLu7N9Ers6Um6kM03GEJJpJ6za20SAn4jiKWGdZaNppf7bfj+B5LDYdzmoLeT3/Fv8S74lDPGFKmstOHXdvZWXk3v1OVDAwjru+r+gF28bSppQh3sqslHVaeOxR4nCurUlUqPfaK5LkrkpIXA50qEY/Kkv31OhgWAzcxcGAM3NWYuYYG2Y2pzs7nMygLJMHHDTurdDsVAAAAAAAAAAAV2NU6cG4NNK1r/wBqvr5oq7163N2/5ieknG6sRCKrqPC0vmfotF7k2FNR2VjoYASlcwDAG0U27IsoUVFWjlvfVyt9xWRk001yLKpCD85q66X/ACA3dKLb/lqy2a3b9DhWpU4pZlKN/W3mQozsyZhYt2c3pfuxfN9QIuKpZJZfZ+BxsTse/lzfMlrYhtAagyANWjBsasDpRnZk8rES8BUcqcW+iKJAACAAAAAAAABGrKzJJyxC0uFcDVsyYZAMGGzGYDOYn4Ko3BxUknF3u+nMr0dKNRxd1/8AV0YEqrQj2l20ovvefgvUk16mVXaTd+4uisR3iYtJOG21nocak3J3YHNtt3YZtYwBo0anRnCvXjD5nbw5+wGxrJ21ZAq8Sk3anH1ev3Cnw2tV1qNpeP02QDE4rO+zp6t6OS5LnYvsPTyxUeiSI2B4dCltq+pNKAACAAAAAAAABiS0MgCF5ms2b4hWZxIrDZlGDKAyjZGqNgOsEGcZ14x+ZpEOpxK+lON31f0AsmyHX4jCOi7z8PqcI4KtV+d6dOXsT8NwyEeV2UVrq16ukVlXhp953w/BVvN3LiMUtjIHGjhYQ+VI7ABAAAAAAAAAAAAAAAAHDF7XIhYVIKScXsymrKrS0cc8eTv3vXr5hUgXK2XEZvSMLPxu/uNqeArVdZvT98tiDvV4hCO3efht7nJVq1T5VlX75ljhuEwjq9WToQS2RYKmhwhvWbuWNHCwjsjuAgAAAAAAAAAAAAAAAAAAAAAAAAYaMgDTsY9DcAAAAAAAAAAAAAAAAAAAAAAAAAAAABD4ljHSSaSd3bXTkTCr4/8ALH/b8guNp8Qqw1qUrR6p3LCnNSSktnqisxMsRVi4dmoJ2u2+jua1YNzhhlJqKiszWl9wLcFRVg6FSGWTcZOzTd+hjicv5qVRyVO2mXqBbzlZN9E2csJiFUjnimldrXwISw9OVF5JyaV3vrdLZ+Bz4NhU4qpmd05aX09gLcHn/wCIhUlJ1ZT37qjeyR1w9eTw9RNvu7N6OzBF2cMbX7ODmle1tPUicNwzajVlNt20XJLY68Y/oy/8fxQG/D8Yqsb7Nbr98jEcW+2dK2iV789k/wAyuyOkqdeOzjBTXojvRmpYpyWzgmv+UBagqZJ1q0oOTUIck7Xe31FJOnW7HM3GcXa71Wj+gE+nik6jpWd479OX1O5RUcEnXnDNKyW99dlu/UvIRskuiS9gMgAIAAAAAAAAEHiuFlUjFRto7u7sTgAZBxuEm5qrTtmWjT5onAKrY4arUnGdWyUdorXXc74mVe7UIxlHxfvdEsAQMBgnCElJq873tsjnw+jWp2g1Fwvq762LMAVkMNWpSl2VpRk72eljtUp1Z0pxmoqT2SfLTdk0AcMFScKcYvdLXma8QoudNxju7b6cySAONGj/ACowkv7UmvSzIOB4fOnVzaONpJO+uu2haACurYapGo6tKzzbxZnC4WbqdrVte1kly/f5lgAKythqsazqU0nmWzfgvoWNO9lm3sr268zYAAAEAAAAAAAAAAAIc+IRVXsrdFfld8iTWqqMXJ7JNnn8sXSlUcl2jlmSur2/bYV6MEKpUlUoZ4NqVr6dVuvxI88e/wCGUk+8+7fx5v2AtQQKqcaUc9Vwf90t278l++RDoYvLVio1XOMmk009Lu3MCyVSp2uXL3LfN4nPB4qU6lSLStF6W83v7Gka0v4pxu8uW9uWyOfDP61bz/NgWhwxtZwpykrXXXzKrEVEr2xMnJX0Sdr9OhIqV3PCuT3tZ+NnYCdg6rnCMnu0nocuJYl04Zo2vdLUg0sNU7FTjVaajdR5WXIxjMQ6mGUnvmSfmrgXFN3SfVJmxV8QxbiqcFLLmSvLey0Rxo4rJVio1XUjLR35MEXQACAAAAAAAAAAAAACDxanOcVCCvd6vol+v4G64bRtbIvPUlgKgcLozp5oSXdu3F9eX0IsOHz7WzX8tScltb98i5AKr+L4ecskorNlbbj12+hwqUqs6lOfZ5VGUeavZSTuy3AFfGhL+Jc7d3La/ojGEw01Os2rKV7P1ZYgClw9GrGEqXZK7v3na2v4nanhprDOGXva6afauWgAqU68aapKnyspJ6W8fEzicDJYdU4q7um7eN77lqAK3HYSbyTgk5RSvF8zahUm5JOgo9Xpp5FgAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP//Z";
byte[] decodeDataImg = Base64.decode(dataImage,Base64.DEFAULT);
Bitmap bmp = BitmapFactory.decodeByteArray(decodeDataImg ,0, decodeDataImg .length);
Glide.with(view).load(bmp).into(imageView_example);

Tested code using Glide below version 5 but useful also in recent versions

dependencies { implementation 'com.github.bumptech.glide:glide:4.11.0'}

score 0 · Answer 7 · answered Aug 19 '23 at 11:58

if you are using compose:

byte[] imageByteArray = Base64.decode(base64String, Base64.DEFAULT);

compose code:

AsyncImage(
    model = imageByteArray, contentDescription = null,
    modifier = Modifier.requiredSize(110.dp),
    contentScale = ContentScale.Fit
)

How to load image through byte array using Glide?

7 Answers7

Linked