SVG to PNG / Esben Sørig

Esben Sørig

Workspace

Published

Edited

Jul 27, 2020

1 star

photos = new SocialPhoto(playlist, mood_description)

html`<img src=${URL.createObjectURL(await photos.squarePhotoUrl())} />`

html`<img src=${URL.createObjectURL(await photos.verticalPhotoUrl())} />`

class SocialPhoto {

constructor(spotifyResult, mood_description) {

this.playlist = spotifyResult

.tracks

.items

.slice(0,4)

.map(track => ({

artists: track.track.artists.map(artists => this.escapeXml(artists.name)),

albumArt: track.track.album.images.filter(image => image.width < 600)[0].url

}));

this.playlist_uri = spotifyResult.uri;

this.mood_description = this.escapeXml(mood_description);

}

async squarePhotoUrl() {

let coverArtSizeGrid = 240;

let playlistPadding = 220;

let playlistPaddingVertical = 85;

const svgSource = `

<defs>

</linearGradient>

<feTurbulence

result="f1"

type="turbulence"

baseFrequency="0.4"

numOctaves="1"

seed="0"

y="0"

x="0"

height="1920"

width="1080" />

<feColorMatrix

in="f1"

result="f2"

type="matrix"

values="1.0 0 0 0.5 0

0 1.0 0 0.5 0

0 0 1.0 0.5 0

0 0 1 1.0 0" />

<feColorMatrix

in="f2"

result="f3"

type="matrix"

values="1.0 0 0 0 0

0 1.0 0 0 0

0 0 1.0 0 0

0 0 0 0.3 0" />

</feMerge>

</filter>

<style>

svg {

font-family: Poppins, "Helvetica Neue", sans-serif;

}

text {

fill: white;

font-weight: 250;

}

text.heading {

fill: black;

}

text.subheading1 {

font-weight: 800;

}

text.result {

font-weight: 600;

}

text.number {

font-weight: 600;

fill: black;

}

text.artist {

font-weight: 600;

text-overflow: ellipsis;

}

rect.result {

fill: rgba(112, 114, 128, 0.2);

}

</style>

</defs>

</g>

<text

x="540"

y="220"

text-anchor="middle"

font-family="sans-serif"

class="subheading1"

font-size="2.5em"

Find your lockdown tracks at quist.app/start

</text>

<g font-size="2em"

transform="translate(0, 265)">

<rect

x="86"

rx="15"

width="908"

height="94"

class="result"

<text x="126" y="58" text-anchor="left">MY LOCKDOWN MOOD</text>

<text x="954" y="58" class="result" text-anchor="end">${this.mood_description.toUpperCase()}</text>

</g>

transform="translate(${(1080-(2*coverArtSizeGrid + playlistPadding))/2}, 445)"

${await Promise.all(this.playlist.slice(0, 4).map(async (d, i) => `

<image

width="${coverArtSizeGrid}"

height="${coverArtSizeGrid}"

y="${Math.floor(i/2)*(coverArtSizeGrid+playlistPaddingVertical)}"

x="${i%2 ? coverArtSizeGrid+playlistPadding : 0}"

href="${await this.dataUrlForImage(d.albumArt)}" />

<text

class="artist"

dominant-baseline="middle"

text-anchor="middle"

y="-30"

font-size="2em"

${d.artists[0]}

</text>

</g>

`)).then(l => l.join("\n"))}

</g>

</svg>

var parser = new DOMParser();

var svgElement = parser.parseFromString(svgSource, "image/svg+xml").childNodes[0];

this.shortenArtistLabels(svgElement, coverArtSizeGrid+playlistPadding*0.9, 1);

// Dirty hack because safari doesn't draw child images unless they've already been drawn once.

const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

return this.rasterize(svgElement)

.then(firstAttempt => isSafari ? this.rasterize(svgElement) : firstAttempt);

}

async verticalPhotoUrl() {

let coverArtSizeGrid = 300

let playlistPadding = 175

let playlistPaddingVertical = 140;

const spotify_qr = await this.dataUrlForImage(`https://scannables.scdn.co/uri/plain/png/F88D25/white/640/${this.playlist_uri}`);

const svgSource = await `

<defs>

</linearGradient>

<feTurbulence

result="f1"

type="turbulence"

baseFrequency="0.4"

numOctaves="1"

seed="0"

y="0"

x="0"

height="1920"

width="1080" />

<feColorMatrix

in="f1"

result="f2"

type="matrix"

values="1.0 0 0 0.5 0

0 1.0 0 0.5 0

0 0 1.0 0.5 0

0 0 1 1.0 0" />

<feColorMatrix

in="f2"

result="f3"

type="matrix"

values="1.0 0 0 0 0

0 1.0 0 0 0

0 0 1.0 0 0

0 0 0 0.3 0" />

</feMerge>

</filter>

<style>

svg {

font-family: Poppins, "Helvetica Neue", sans-serif;

}

text {

fill: white;

font-weight: 250;

}

text.heading {

fill: black;

}

text.subheading1 {

font-weight: 800;

}

text.result {

font-weight: 600;

}

text.number {

font-weight: 600;

fill: black;

}

text.artist {

font-weight: 600;

text-overflow: ellipsis;

}

rect.result {

fill: rgba(112, 114, 128, 0.2);

}

</style>

</defs>

</g>

<text

x="540"

y="300"

text-anchor="middle"

font-family="sans-serif"

class="subheading1"

font-size="3.5em"

Find your lockdown tracks

<tspan x="540" y="370">quist.app/start</tspan>

</text>

<g font-size="3em"

transform="translate(0, 430)">

<rect

x="86"

rx="25"

width="908"

height="200"

class="result"

<text x="50%" y="78" text-anchor="middle">MY LOCKDOWN MOOD</text>

<text x="50%" y="154" class="result" text-anchor="middle">${this.mood_description.toUpperCase()}</text>

</g>

transform="translate(${(1080-(2*coverArtSizeGrid + playlistPadding))/2}, 760)"

${await Promise.all(this.playlist.slice(0, 4).map(async (d, i) => `

<image

width="${coverArtSizeGrid}"

height="${coverArtSizeGrid}"

y="${Math.floor(i/2)*(coverArtSizeGrid+playlistPaddingVertical)}"

x="${i%2 ? coverArtSizeGrid+playlistPadding : 0}"

href="${await this.dataUrlForImage(d.albumArt)}" />

<text

class="artist"

dominant-baseline="middle"

text-anchor="middle"

y="-50"

font-size="3em"

${d.artists[0]}

</text>

</g>

`)).then(l => l.join('\n'))}

</g>

<rect

y="1800"

height="120"

width="1080"

fill="#F88D25"

<text

dominant-baseline="middle"

y="1860"

x="${(1080-(2*coverArtSizeGrid + playlistPadding))/2}"

font-size="3em"

My playlist:

</text>

<image

href="${spotify_qr}"

y="1800"

x="${600-(1080-(2*coverArtSizeGrid + playlistPadding))/2}"

height="120"

</svg>

var parser = new DOMParser();

var svgElement = parser.parseFromString(svgSource, "image/svg+xml").childNodes[0];

this.shortenArtistLabels(svgElement, coverArtSizeGrid+playlistPadding*0.9, 1);

// Dirty hack because safari doesn't draw child images unless they've already been drawn once.

const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

return this.rasterize(svgElement)

.then(firstAttempt => isSafari ? this.rasterize(svgElement) : firstAttempt);

}

shortenArtistLabels(svg, maxWidth, minFontSize) {

const div = document.createElement('div');

div.setAttribute("style", "position:absolute; visibility:hidden; width:0; height:0");

div.appendChild(svg)

document.body.appendChild(div);

for (let artistLabel of svg.querySelectorAll('text.artist'))

this.shortenLabelToMaxWidth(artistLabel, maxWidth, minFontSize);

document.body.removeChild(div);

}

shortenLabelToMaxWidth(textNode, maxWidth, minTextSize) {

let prevLength = null;

while (textNode.getComputedTextLength() > maxWidth) {

const fontSize = Number(textNode.attributes['font-size'].value.split('em')[0]);

if (fontSize - 0.5 > minTextSize) {

textNode.setAttribute('font-size', `${fontSize-0.5}em`);

continue

}

if (textNode.innerHTML.trim().length > 2)

textNode.innerHTML = textNode.innerHTML.trim().slice(0,-2).trim() + '…'

if (textNode.getComputedTextLength() == prevLength)

break;

prevLength = textNode.getComputedTextLength();

}

async rasterize(svg) {

let resolve, reject;

const promise = new Promise((y, n) => (resolve = y, reject = n));

const image = new Image();

const loadPromise = new Promise((resolve, reject) => {

image.onerror = reject;

image.onload = resolve;

image.src = URL.createObjectURL(this.serialize(svg));

});

await loadPromise;

var canvas = document.createElement('canvas');

canvas.width = svg.width.baseVal.value;

canvas.height = svg.height.baseVal.value;

var context = canvas.getContext('2d');

context.drawImage(image, 0, 0, svg.width.baseVal.value, svg.height.baseVal.value);

context.canvas.toBlob(resolve);

return promise;

}

serialize(svg) {

const xmlns = "http://www.w3.org/2000/xmlns/";

const xlinkns = "http://www.w3.org/1999/xlink";

const svgns = "http://www.w3.org/2000/svg";

svg = svg.cloneNode(true);

svg.setAttributeNS(xmlns, "xmlns", svgns);

svg.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);

const serializer = new window.XMLSerializer;

const string = serializer.serializeToString(svg);

return new Blob([string], {type: "image/svg+xml"});

};

async dataUrlForImage(imageUrl) {

let blob = await fetch(imageUrl).then(r => r.blob());

return new Promise(resolve => {

let reader = new FileReader();

reader.onload = () => resolve(reader.result);

reader.readAsDataURL(blob);

});

}

escapeXml(unsafe) {

return unsafe.replace(/[<>&'"]/g, function (c) {

switch (c) {

case '<': return '<';

case '>': return '>';

case '&': return '&';

case '\'': return ''';

case '"': return '"';

}

});

}

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more