# How can I save an image with the settings extension?

**URL:** <https://forum.makecode.com/t/how-can-i-save-an-image-with-the-settings-extension/4063>\
**Category:** Arcade\
**Created:** [October 25, 2020, 12:51am UTC](https://forum.makecode.com/t/how-can-i-save-an-image-with-the-settings-extension/4063 "2020-10-25T00:51:11Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![GameGod](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gamegod/32/2756_2.png) [@GameGod](https://forum.makecode.com/u/GameGod)\
**Post date:** [October 25, 2020, 12:51am UTC](https://forum.makecode.com/t/how-can-i-save-an-image-with-the-settings-extension/4063/1 "2020-10-25T00:51:12Z")

</div>

I think the settings extension is very useful, but I can’t find how to save an image. I tried saving every pixel in an array, but it is complex and laggy. Is there a way to save images?

---

<div class="post-metadata">

**Author:** ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)\
**Post date:** [October 25, 2020, 3:37am UTC](https://forum.makecode.com/t/how-can-i-save-an-image-with-the-settings-extension/4063/2 "2020-10-25T03:37:20Z")

</div>

Unfortunately, that’s what you are going to have to do. ☹

---

<div class="post-metadata">

**Author:** ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)\
**Post date:** [October 25, 2020, 4:00am UTC](https://forum.makecode.com/t/how-can-i-save-an-image-with-the-settings-extension/4063/3 "2020-10-25T04:00:50Z")

</div>

How big of an image are you talking (16x16, fullscreen)? And is this only in the browser, or will you be using hardware too? (Hardware might just not work with a full screen image, as it will be a bit over 9.6kb at minimum)

---

<div class="post-metadata">

**Author:** ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)\
**Post date:** [October 25, 2020, 1:14pm UTC](https://forum.makecode.com/t/how-can-i-save-an-image-with-the-settings-extension/4063/4 "2020-10-25T13:14:02Z")

</div>

I think full screen, because @GameGod is going to use it in his Pixx Artist thing.

---

<div class="post-metadata">

**Author:** ![GameGod](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gamegod/32/2756_2.png) [@GameGod](https://forum.makecode.com/u/GameGod)\
**Post date:** [October 25, 2020, 3:36pm UTC](https://forum.makecode.com/t/how-can-i-save-an-image-with-the-settings-extension/4063/5 "2020-10-25T15:36:47Z")

</div>

@UnsignedArduino is correct. I am only using the browser. Currently, I have no hardware.

---

<div class="post-metadata">

**Author:** ![GameGod](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gamegod/32/2756_2.png) [@GameGod](https://forum.makecode.com/u/GameGod)\
**Post date:** [October 25, 2020, 3:41pm UTC](https://forum.makecode.com/t/how-can-i-save-an-image-with-the-settings-extension/4063/6 "2020-10-25T15:41:06Z")

</div>

I’ve got it! Maybe an array of images, with only one image?

![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/3/3c5a0d66355f3761b1144636647825f0869f3327.png)  
It askes for a number array though, will it work? Only one way to find out!

Edit: Unfortunately, no.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/3/3aec0257b449b327a04b5153894ed05b3de68b21.png)

---

<div class="post-metadata">

**Author:** ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)\
**Post date:** [October 27, 2020, 10:44pm UTC](https://forum.makecode.com/t/how-can-i-save-an-image-with-the-settings-extension/4063/7 "2020-10-27T22:44:47Z")

</div>

Sorry, lost track of this thread! As noted, this won’t work well on hardware for large images, but here’s a quick javascript program that will save / load images into storage:

> **[Untitled](https://arcade.makecode.com/56434-38163-01346-08510)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

when you press B, it will save whatever image is stored at the beginning of the `on b button pressed` event to storage, and when you press A, it will create a sprite using the image that was stored in memory.

```typescript
controller.B.onEvent(ControllerButtonEvent.Pressed, () => {
    const toSave = img`
        1...............................
        ................................
        ................................
        ...............444..............
        ..........44444..4..............
        .......444...4444.4.............
        ......4.....4777744.............
        ....44.....47777774..444........
        ...4.......477777744.4..4.......
        ..4...4444444777774.44..44......
        .4..447774777777774..4....4.....
        .4.4777747777777774..44....4....
        .447777747777777774..4.4...4....
        .477777477777777744444444..4....
        .447777477777777447774.4.4.4....
        4774777477777744.47774..4444....
        4777477477777477477774....44....
        4777747477774777477774....44....
        4777774477747777477774...44.4...
        4777777447477774777774..4.4..4..
        47777774.4477747777774.4.4...44.
        4777777447777747777774.4.4....4.
        4777777447777477777774444.....4.
        4777777447744777744444........4.
        47777774444..4444444.........4..
        47777774444444444.4........44...
        .47777774.44....44......444.....
        ..4444444444444444444444........
        ................................
        ................................
        ................................
        ................................
    `;
    const w = toSave.width;
    const h = toSave.height;
    const imgBuf = pins.createBuffer(h * w);
    const rowBuf = pins.createBuffer(h);
    for (let i = 0; i < h; ++i) {
        // load one image at a time...
        toSave.getRows(i, rowBuf);
        // and save to the buffer we're going to store, offset from the start.
        imgBuf.write(i * w, rowBuf);
    }

    settings.writeBuffer("my-cool-img", imgBuf);
    settings.writeNumber("w", w);
    settings.writeNumber("h", h);
})

controller.A.onEvent(ControllerButtonEvent.Pressed, () => {
    const loadedImg = settings.readBuffer("my-cool-img");
    if (!loadedImg)
        return;
    const w = settings.readNumber("w");
    const h = settings.readNumber("h");

    const outputImg = image.create(w, h); 
    for (let i = 0; i < h; ++i) {
        const row = loadedImg.slice(i * w, w);
        outputImg.setRows(i, row);
    }

    const a = sprites.create(outputImg);
});

```

---

<div class="post-metadata">

**Author:** ![GameGod](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gamegod/32/2756_2.png) [@GameGod](https://forum.makecode.com/u/GameGod)\
**Post date:** [October 27, 2020, 10:51pm UTC](https://forum.makecode.com/t/how-can-i-save-an-image-with-the-settings-extension/4063/8 "2020-10-27T22:51:01Z")

</div>

I’m not good with JavaScript… I need it to save the background on game update for my pixx artist pro game. I want it to ask “reload your last drawing?”, and if so, set the current background to the last drawing.

---

<div class="post-metadata">

**Author:** ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)\
**Post date:** [October 27, 2020, 10:52pm UTC](https://forum.makecode.com/t/how-can-i-save-an-image-with-the-settings-extension/4063/9 "2020-10-27T22:52:15Z")

</div>

I’ll make a quick extension for you 🙂

---

<div class="post-metadata">

**Author:** ![GameGod](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gamegod/32/2756_2.png) [@GameGod](https://forum.makecode.com/u/GameGod)\
**Post date:** [October 27, 2020, 10:52pm UTC](https://forum.makecode.com/t/how-can-i-save-an-image-with-the-settings-extension/4063/10 "2020-10-27T22:52:53Z")

</div>

Thanks for that, extensions really help!

---

<div class="post-metadata">

**Author:** ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)\
**Post date:** [October 27, 2020, 11:12pm UTC](https://forum.makecode.com/t/how-can-i-save-an-image-with-the-settings-extension/4063/11 "2020-10-27T23:12:00Z")

</div>

Okay, here you go:

> **[jwunderl/arcade-image-storage](https://github.com/jwunderl/arcade-image-storage)**
>
> A MakeCode project. Contribute to jwunderl/arcade-image-storage development by creating an account on GitHub.

and quick example [https://makecode.com/\_E4kMLR6df0VP](https://makecode.com/_E4kMLR6df0VP)

I added the blocks to the bottom of the image ‘category’, which is under ‘advanced’.

Just one final mention, this won’t work great on hardware for large images / is optimized for speed, so a full screen image will be about 20kb / likely more than a physical device will be able to store.

---

<div class="post-metadata">

**Author:** ![GameGod](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gamegod/32/2756_2.png) [@GameGod](https://forum.makecode.com/u/GameGod)\
**Post date:** [October 27, 2020, 11:12pm UTC](https://forum.makecode.com/t/how-can-i-save-an-image-with-the-settings-extension/4063/12 "2020-10-27T23:12:29Z")

</div>

Thank you so much!

Would I use the “if setting exists block” in the settings extension?

---

<div class="post-metadata">

**Author:** ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)\
**Post date:** [October 27, 2020, 11:30pm UTC](https://forum.makecode.com/t/how-can-i-save-an-image-with-the-settings-extension/4063/13 "2020-10-27T23:30:30Z")

</div>

As of v0.1.2 you can 🙂 . If you just try and read it like I do in the example, though, you can drop the result in an if, and if the setting hasn’t been created it will just not run that if – the result is ‘falsey’ in that case.

![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/b/bd9dd3ca19c9a7d171c23c21b5b664124c0eff11.png)

---

<div class="post-metadata">

**Author:** ![Log](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/log/32/30691_2.png) [@Log](https://forum.makecode.com/u/Log)\
**Post date:** [April 9, 2026, 4:23pm UTC](https://forum.makecode.com/t/how-can-i-save-an-image-with-the-settings-extension/4063/14 "2026-04-09T16:23:08Z")

</div>

Sorry to bring you back here, but I tried adding this extension to my Art game but it doesn’t seem to exactly work. I may be doing this wrong as I’m in block code right now, or this extension might not have functionality for this. I’m still relatively new to coding so any help would be greatly appreciated. 😃

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/1/0/109a7c275492a9c8b7c8cee42818a1078b2218ee.png)

Im trying to get the game to save a drawing that the player made in which the player can then load that art that they made back in. I’m trying to make it so that the player can loading drawings even after closing the game tab and then reopening it. I’m not sure if this is exactly possible because I feel it would require a highly complicated system to get what I’m looking for. If you would like to look at my game I’m trying to add this to here is the link to it: [ARCANE DRAWINGS. (A actual working painting game) [COMPUTER ONLY]](https://forum.makecode.com/t/arcane-drawings-a-actual-working-painting-game-computer-only/43211)
