# Best way to display an image from a gltf in a HTML image div

**URL:** <https://discourse.threejs.org/t/best-way-to-display-an-image-from-a-gltf-in-a-html-image-div/26211>\
**Category:** Questions\
**Tags:** image-bitmap, html\
**Created:** [May 13, 2021, 9:10am UTC](https://discourse.threejs.org/t/best-way-to-display-an-image-from-a-gltf-in-a-html-image-div/26211 "2021-05-13T09:10:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![optimus007](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/optimus007/32/18204_2.png) [@optimus007](https://discourse.threejs.org/u/optimus007)\
**Post date:** [May 13, 2021, 9:10am UTC](https://discourse.threejs.org/t/best-way-to-display-an-image-from-a-gltf-in-a-html-image-div/26211/1 "2021-05-13T09:10:17Z")

</div>

So i want to display images from a glb/gltf in a html div  
the current work flow i use is

1. Get `material.map` which will have a THREE.texture object
2. Get the image from `image` key of the THREE.texture object . This will be a ImageBitamp object with only `width` and `height` keys present
3. Make a html canvas ,then use ` drawImage(imageBitmap,0,0,w,h)`
4. Then use `canvas.toDataURL("image/png")` to get base64 of image
5. Then create image element and add the base 64 as src to the this img element
6. Append to body

Is there a more optimised way to just display the image ?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 13, 2021, 9:14am UTC](https://discourse.threejs.org/t/best-way-to-display-an-image-from-a-gltf-in-a-html-image-div/26211/2 "2021-05-13T09:14:28Z")

</div>

The only way to show an instance of `ImageBitamp` as an image is to draw it onto a canvas. You then have to use `toDataURL()` in order to use the canvas as the image’s data source.

So what you are doing right now is already correct.

---

<div class="post-metadata">

**Author:** ![Danish\_Islam](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danish_islam/32/36573_2.png) [@Danish\_Islam](https://discourse.threejs.org/u/Danish_Islam)\
**Post date:** [May 25, 2023, 12:31pm UTC](https://discourse.threejs.org/t/best-way-to-display-an-image-from-a-gltf-in-a-html-image-div/26211/3 "2023-05-25T12:31:48Z")

</div>

I am trying to get the image using canvas from ImageBitmap.

small images are getting load using canvas.toDataURL() but a 4mb image is not getting load completely.

Since ImageBitmap does not have src property not able to create a closure

```javascript
                const c = document.createElement('canvas');
                c.width = this.#originalMaterials[key].image.width;
                c.height = this.#originalMaterials[key].image.height;
                const ctx = c.getContext('2d');
                ctx.drawImage(this.#originalMaterials[key].image, 0, 0, this.#originalMaterials[key].image.width, this.#originalMaterials[key].image.height, 0, 0, c.width, c.height);
                    console.log(c.toDataURL());

                
              

```