<p>To do this in a web app is trivial. Judging by the image, even the built-in HTML canvas should be able to do everything that you need.</p>

<p>Once you have obtained your image and text, to give you a vague idea of the ammount of code involved, drawing them with the canvas API looks roughly as follows:</p>

<pre><code>ctx.drawImage(img, x, y, width, height);
ctx.font = '12px serif';
ctx.fillText(txt, x, y);
</code></pre>

<p>Saving the image is equally simple:</p>

<pre><code>canvas.toDataURL("image/png")
</code></pre>

<p>It's actually the obtaining and sharing of images are the scary parts. Spotify surely have all the images on their cloud and similarly that is where they export them to before sharing to social media. There are so many sollutions that without more detail this is probably something you'll need to find yourself.</p>

<p>If you just need a tutorial on html canvas, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage" rel="nofollow noreferrer">mozzilla usually have great interactive tutorials</a>.</p>

CC BY-SA 4.0
2019-12-08T22:48:27.970Z
2019-12-08T22:48:27.970Z
arctiq
<p>Apologize for crossposting, but I posted this in Stack Overflow and thought it might be a better post here.</p>

<p>Recently, Spotify released their 2019 Spotify wrapped web application, which is essentially a way for both music artists and music listeners to rewind and review what they listened to/who listened to their music in the past year.</p>

<p>As part of their site, they dynamically created these images that people could either export or share to one of their social media networks.</p>

<p><a href="https://i.sstatic.net/28fZc.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/28fZc.jpg" alt="Example of dynamically generated image from Spotify"></a></p>

<p>Above is an example of one of those dynamically generated images (of course, the image, and the text/statistics below change).</p>

<p>How would I go about doing this in code? </p>

<p>Sorry if this is in the wrong place - just wasn't sure where I would post this. Thanks in advance!</p>

CC BY-SA 4.0
2019-12-08T12:46:27.613Z
What API are you looking to use? In general you just need image and text rendering libraries.
lightxbulb
CC BY-SA 4.0
2019-12-08T20:16:13.503Z
@lightxbulb I'm not sure if I was planning on using an API to handle this. I've never really worked with image and text rendering libraries before, especially one that can do both the rendering and the exporting. Any recommendations for something web-based?
Derek Mei
CC BY-SA 4.0
2019-12-09T00:53:19.307Z
WebGL can be used for the 3d stacking effect (load the texture and apply it on several quads). There are many libraries providing text rendering for it (for example Three.js).
lightxbulb
CC BY-SA 4.0
2019-12-09T07:52:26.727Z
@DerekMei you do undrerstand that it is very rare for people not to use an API of somekind. But i guess a person bootstrapping a new processor technically need not be using an api.
joojaa
<image-processing><vector-graphics><image>
How do you add text dynamically to an image and export it?
Derek Mei
# How do you add text dynamically to an image and export it?

(Asked by: username_0 on 2019-12-08)

Apologize for crossposting, but I posted this in Stack Overflow and thought it might be a better post here.

Recently, Spotify released their 2019 Spotify wrapped web application, which is essentially a way for both music artists and music listeners to rewind and review what they listened to/who listened to their music in the past year.

As part of their site, they dynamically created these images that people could either export or share to one of their social media networks.

[![Example of dynamically generated image from Spotify](https://i.sstatic.net/28fZc.jpg)](https://i.sstatic.net/28fZc.jpg)

Above is an example of one of those dynamically generated images (of course, the image, and the text/statistics below change).

How would I go about doing this in code?

Sorry if this is in the wrong place - just wasn't sure where I would post this. Thanks in advance!

**Tags:** image-processing, vector-graphics, image

> **Comments:**
> **username_1**: What API are you looking to use? In general you just need image and text rendering libraries.  
> **username_0**: @username_1 I'm not sure if I was planning on using an API to handle this. I've never really worked with image and text rendering libraries before, especially one that can do both the rendering and the exporting. Any recommendations for something web-based?  
> **username_1**: WebGL can be used for the 3d stacking effect (load the texture and apply it on several quads). There are many libraries providing text rendering for it (for example Three.js).  
> **username_2**: @username_0 you do undrerstand that it is very rare for people not to use an API of somekind. But i guess a person bootstrapping a new processor technically need not be using an api.  

---

## 1 answers

### Answer by username_3 on 2019-12-08. Score: 1

To do this in a web app is trivial. Judging by the image, even the built-in HTML canvas should be able to do everything that you need.

Once you have obtained your image and text, to give you a vague idea of the ammount of code involved, drawing them with the canvas API looks roughly as follows:

```
ctx.drawImage(img, x, y, width, height);
ctx.font = '12px serif';
ctx.fillText(txt, x, y);

```

Saving the image is equally simple:

```
canvas.toDataURL("image/png")

```

It's actually the obtaining and sharing of images are the scary parts. Spotify surely have all the images on their cloud and similarly that is where they export them to before sharing to social media. There are so many sollutions that without more detail this is probably something you'll need to find yourself.

If you just need a tutorial on html canvas, [mozzilla usually have great interactive tutorials](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage).


---

