# How to take picture?

**URL:** <https://forum.8thwall.com/t/how-to-take-picture/6372>\
**Category:** Technical Support\
**Tags:** FAQ, general, studio\
**Created:** [May 7, 2025, 1:21pm UTC](https://forum.8thwall.com/t/how-to-take-picture/6372 "2025-05-07T13:21:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wicida\_AR](https://avatars.discourse-cdn.com/v4/letter/w/59ef9b/32.png) [@Wicida\_AR](https://forum.8thwall.com/u/Wicida_AR)\
**Post date:** [May 7, 2025, 1:21pm UTC](https://forum.8thwall.com/t/how-to-take-picture/6372/1 "2025-05-07T13:21:31Z")

</div>

hello there, I wonder if there’s a way to make capture button like in:  
[https://www.8thwall.com/8thwall/capturephoto-aframe](https://www.8thwall.com/8thwall/capturephoto-aframe)

I use the face effect, I wonder how it could be done since I already tried several ways to implement the feature, but to no avail, since it have different workflow I guess ? any help is appreciated.

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [May 7, 2025, 6:31pm UTC](https://forum.8thwall.com/t/how-to-take-picture/6372/2 "2025-05-07T18:31:58Z")

</div>

Hi, welcome to the forums!

We’re currently working on this as a sample project feature. In the meantime you can build it out yourself by following the instructions in this thread:

> [@Screenshot Doesn't Include UI Elements](https://forum.8thwall.com/t/screenshot-doesnt-include-ui-elements/6093/6):
>
> Updating your screenshot code to the following worked: function takeScreenshot() { // Find the canvas used for rendering the 3D scene const {XR8} = window as any XR8.addCameraPipelineModule(XR8.canvasScreenshot().cameraPipelineModule()) XR8.canvasScreenshot().takeScreenshot().then( (data) =\> { // myImage is an \<img\> HTML element let image = document.getElementById('myImage') as HTMLImageElement if (!image) { image = document.createElement('img') ima…

---

<div class="post-metadata">

**Author:** ![Wicida\_AR](https://avatars.discourse-cdn.com/v4/letter/w/59ef9b/32.png) [@Wicida\_AR](https://forum.8thwall.com/u/Wicida_AR)\
**Post date:** [May 8, 2025, 2:14am UTC](https://forum.8thwall.com/t/how-to-take-picture/6372/3 "2025-05-08T02:14:47Z")

</div>

I apologize but I couldn’t get the script working on a button, the script supposed to be dragged on a UI button right ? I couldnt find it on new component section too ? or I missing something perhaps ?

it said “no component found in file”, I tried it with Js. and Ts. I am sorry I am new to this workflow.

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [May 8, 2025, 3:45pm UTC](https://forum.8thwall.com/t/how-to-take-picture/6372/4 "2025-05-08T15:45:15Z")

</div>

The code itself isn’t a custom component, it’s moreso to show you how you would create the “takeScreenshot” function and then you could use it in your custom component. Like a button click etc.

Make sure you check out this guide: [Custom Components | 8th Wall](https://www.8thwall.com/docs/studio/guides/custom-components/)