# Use loadimage() with base64-encoded PNG.

**URL:** <https://discourse.processing.org/t/use-loadimage-with-base64-encoded-png/5897>\
**Category:** Coding Questions\
**Created:** [November 24, 2018, 7:31pm UTC](https://discourse.processing.org/t/use-loadimage-with-base64-encoded-png/5897 "2018-11-24T19:31:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![RecursiveCursive](https://avatars.discourse-cdn.com/v4/letter/r/7cd45c/32.png) [@RecursiveCursive](https://discourse.processing.org/u/RecursiveCursive)\
**Post date:** [November 24, 2018, 7:31pm UTC](https://discourse.processing.org/t/use-loadimage-with-base64-encoded-png/5897/1 "2018-11-24T19:31:31Z")

</div>

Hello everyone,

I am trying to load an image from a base64-encoded string with loadImage like this: loadimage(“data:image/png;base64,iVBORw0KGgoA…”), but it is not working (I cut the base64 string short in this post for space). When I this, I get an error saying, “The file “data:image/png;base64,iVBOR…” is missing or inaccessible, make sure the URL is valid or that the file has been added to your sketch and is readable.”

I know the encoded string is valid, and as far as I am aware, it is possible to do this. Does anyone know how I can solve this?

Thank you

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 24, 2018, 7:33pm UTC](https://discourse.processing.org/t/use-loadimage-with-base64-encoded-png/5897/2 "2018-11-24T19:33:24Z")

</div>

Is this for Processing(Java) or p5.js?

> [@RecursiveCursive](#):
>
> I know the encoded string is valid, and as far as I am aware, it is possible to do this.

Where did you find this use of `data:` urls with loadImage documented or demonstrated?

---

<div class="post-metadata">

**Author:** ![RecursiveCursive](https://avatars.discourse-cdn.com/v4/letter/r/7cd45c/32.png) [@RecursiveCursive](https://discourse.processing.org/u/RecursiveCursive)\
**Post date:** [November 25, 2018, 5:06pm UTC](https://discourse.processing.org/t/use-loadimage-with-base64-encoded-png/5897/3 "2018-11-25T17:06:38Z")

</div>

This is for Java. I was mistaken. That said, I was easily able to implement a base64 PImage loader by extending the PApplet class, so the problem has been solved.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 25, 2018, 5:12pm UTC](https://discourse.processing.org/t/use-loadimage-with-base64-encoded-png/5897/4 "2018-11-25T17:12:55Z")

</div>

Glad to hear that you were able to solve your problem!

If you are extending PApplet then am I right that you are working in eg Eclipse? Some forum members might be interested in the encoder method if you are willing to share it.

---

<div class="post-metadata">

**Author:** ![RecursiveCursive](https://avatars.discourse-cdn.com/v4/letter/r/7cd45c/32.png) [@RecursiveCursive](https://discourse.processing.org/u/RecursiveCursive)\
**Post date:** [November 25, 2018, 5:30pm UTC](https://discourse.processing.org/t/use-loadimage-with-base64-encoded-png/5897/5 "2018-11-25T17:30:27Z")

</div>

Yes, I am indeed working in Eclipse. As for my code, I would be glad to share it. Here it is!

```auto
import java.awt.Image;
import java.awt.Toolkit;
import java.util.Base64;

import processing.core.PImage;

public class PAppletExt extends processing.core.PApplet {
	private static final long serialVersionUID = 1L; // This is here to suppress an Eclipse warning.
	
	public PImage loadBase64PNG(String base64Str) {
		// Loads a PImage from a given base 64-encoded PNG image given as a string.
		byte[] imageBytes = Base64.getDecoder().decode(base64Str);
		Image awtImage = Toolkit.getDefaultToolkit().createImage(imageBytes);
		return super.loadImageMT(awtImage);
	}
}

```

---

<div class="post-metadata">

**Author:** ![clankill3r](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/clankill3r/32/1098_2.png) [@clankill3r](https://discourse.processing.org/u/clankill3r)\
**Post date:** [October 4, 2019, 3:37pm UTC](https://discourse.processing.org/t/use-loadimage-with-base64-encoded-png/5897/6 "2019-10-04T15:37:50Z")

</div>

I added a pull request for base64 image support

> <https://github.com/processing/processing/pull/5933>