1
$\begingroup$

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

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!

$\endgroup$
  • 1
    $\begingroup$ What API are you looking to use? In general you just need image and text rendering libraries. $\endgroup$ – lightxbulb Dec 8 '19 at 12:46
  • $\begingroup$ @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? $\endgroup$ – Derek Mei Dec 8 '19 at 20:16
  • $\begingroup$ 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). $\endgroup$ – lightxbulb Dec 9 '19 at 0:53
  • $\begingroup$ @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. $\endgroup$ – joojaa Dec 9 '19 at 7:52
1
$\begingroup$

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.

| improve this answer | |
$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.