# How to get a P5 image into the DOM?

**URL:** <https://discourse.processing.org/t/how-to-get-a-p5-image-into-the-dom/25726>\
**Category:** Libraries\
**Created:** [November 26, 2020, 12:55pm UTC](https://discourse.processing.org/t/how-to-get-a-p5-image-into-the-dom/25726 "2020-11-26T12:55:16Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![zenglenn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zenglenn/32/5569_2.png) [@zenglenn](https://discourse.processing.org/u/zenglenn)\
**Post date:** [November 26, 2020, 12:55pm UTC](https://discourse.processing.org/t/how-to-get-a-p5-image-into-the-dom/25726/1 "2020-11-26T12:55:17Z")

</div>

Hi  
I want to get an internally created image file (not loaded or from a url) into the DOM. I’m sure it’s really simple, but have no idea, thanks.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 26, 2020, 4:24pm UTC](https://discourse.processing.org/t/how-to-get-a-p5-image-into-the-dom/25726/2 "2020-11-26T16:24:48Z")

</div>

What do you mean by into the DOM?  
Where will it be saved? I don’t think you can upload an image to the web editor dynamically.  
You can save it into your download folder.

```auto
let img;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  line(0, 0, width, height);
  line(width, 0, 0, height);
}

function mousePressed() {
  img = get();
  img.save('image','png');
}

```

---

<div class="post-metadata">

**Author:** ![zenglenn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zenglenn/32/5569_2.png) [@zenglenn](https://discourse.processing.org/u/zenglenn)\
**Post date:** [November 26, 2020, 5:10pm UTC](https://discourse.processing.org/t/how-to-get-a-p5-image-into-the-dom/25726/3 "2020-11-26T17:10:31Z")

</div>

okay I’ll try and clarify my problem,  
Im using ML5.js to create a browser app that features neural style transfer. The user can create an image in P5.js and then the style transfer processes this image. However - the style transfer process (as far as I can get working) can only happen in the HTML / DOM side as an ![]() , this is because the tensorflow process needs WebGL.

So, more simply I need get a P5.image into the same format as a createImg() - created as an element in the DOM.

I hope that makes sense!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 26, 2020, 6:48pm UTC](https://discourse.processing.org/t/how-to-get-a-p5-image-into-the-dom/25726/4 "2020-11-26T18:48:27Z")

</div>

> [@zenglenn](#):
>
> So more simply I need to get a p5.Image into the same format as a **createImg()**.

**createImg()** creates a p5.Element wrapping an `<img>` DOM element which can be accessed via its property _elt_:  
[reference | p5.js](http://p5js.org/reference/#/p5.Element/elt)

> **[: The Image Embed element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)**
>
> The HTML element embeds an image into the document.

On the other hand a p5.Image is a wrapper for a `<canvas>` DOM element which can be accessed via its property _canvas_:  
[reference | p5.js](http://p5js.org/reference/#/p5.Image)

> **[: The Graphics Canvas element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas)**
>
> Use the HTML element with either the canvas scripting API or the WebGL API to draw graphics and animations.

> [@zenglenn](#):
>
> , this is because the Tensorflow process needs WebGL.

Unfortunately p5.Image uses a CanvasRenderingContext2D accessed via its property _drawingContext_:

> **[CanvasRenderingContext2D - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)**
>
> The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a element.
> It is used for drawing shapes, text, images, and other objects.

---

<div class="post-metadata">

**Author:** ![zenglenn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zenglenn/32/5569_2.png) [@zenglenn](https://discourse.processing.org/u/zenglenn)\
**Post date:** [November 26, 2020, 7:49pm UTC](https://discourse.processing.org/t/how-to-get-a-p5-image-into-the-dom/25726/5 "2020-11-26T19:49:04Z")

</div>

Hi,  
Thx, I’m aware of all of the above - but I still don’t know how to solve my problem.

e.g.  
I have an image ‘myImage’ which was created with createImage()… NOT createImg() or loadImage().

I need to convert / copy across ‘myImage’ into the DOM.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 26, 2020, 8:14pm UTC](https://discourse.processing.org/t/how-to-get-a-p5-image-into-the-dom/25726/6 "2020-11-26T20:14:59Z")

</div>

> [@zenglenn](#):
>
> I need to convert / copy across ‘myImage’ into the DOM.

As I’ve stated a p5.Image contains a `<canvas>` DOM element accessible via its _canvas_ property:

> **[HTMLCanvasElement - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement)**
>
> The HTMLCanvasElement interface provides properties and methods for manipulating the layout and presentation of elements. The HTMLCanvasElement interface also inherits the properties and methods of the HTMLElement interface.

> [@zenglenn](#):
>
> I’m using ML5.js to create a browser app that features neural style transfer.

You need to search that library’s docs for which datatypes it can work with.

For example whether it can accept an HTMLCanvasElement.

You may also attempt to invoke method HTMLCanvasElement::**toDataURL()** over a p5.Image::_canvas_ and use it as the 1st argument for **createImg()**:  
[reference | p5.js](http://p5js.org/reference/#/p5/createImg)

> **[HTMLCanvasElement: toDataURL() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL)**
>
> The HTMLCanvasElement.toDataURL() method returns a data URL containing a representation of the image in the format specified by the type parameter.

---

<div class="post-metadata">

**Author:** ![zenglenn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zenglenn/32/5569_2.png) [@zenglenn](https://discourse.processing.org/u/zenglenn)\
**Post date:** [November 26, 2020, 8:33pm UTC](https://discourse.processing.org/t/how-to-get-a-p5-image-into-the-dom/25726/7 "2020-11-26T20:33:57Z")

</div>

ok - thanks - these ideas seem useful - I’ll give it a try 🙂

---

<div class="post-metadata">

**Author:** ![zenglenn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zenglenn/32/5569_2.png) [@zenglenn](https://discourse.processing.org/u/zenglenn)\
**Post date:** [November 27, 2020, 8:25pm UTC](https://discourse.processing.org/t/how-to-get-a-p5-image-into-the-dom/25726/8 "2020-11-27T20:25:56Z")

</div>

Hey,  
Thanks again for your help - I got everything working.  
I basically just drew my image onto the canvas - then took a ‘snap shot’ of it with toDataURL() and popped that inside createImg like you said… voila…

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 28, 2020, 1:19am UTC](https://discourse.processing.org/t/how-to-get-a-p5-image-into-the-dom/25726/9 "2020-11-28T01:19:51Z")

</div>

> [@zenglenn](#):
>
> … then took a ‘snapshot’ of it with **toDataURL()** and popped that inside **createImg()**…

Congratz! 🥳 So you did something like this I believe: 😛const snapshot = createImg(canvas.toDataURL()).hide();

---

<div class="post-metadata">

**Author:** ![zenglenn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zenglenn/32/5569_2.png) [@zenglenn](https://discourse.processing.org/u/zenglenn)\
**Post date:** [November 28, 2020, 7:08am UTC](https://discourse.processing.org/t/how-to-get-a-p5-image-into-the-dom/25726/10 "2020-11-28T07:08:07Z")

</div>

haha - my code is no where near as elegant - but I don’t care - it works!