2d:null 2e:["$","title",null,{"children":"SVG to PNG | Esben Sørig | Observable"}] 33:T5bd,playlist = ({ uri: "spotify:playlist:12YSJbqA0XGxouDKLS98UD", tracks: { items: [ { "track": { "artists": [ {name:"Richard Spaven"}, {name:"Jordan Rakei"} ], "album": { images: [ { url:"https://i.scdn.co/image/ab67616d00001e027e327745c9f113ecce465f19", width: 500 } ] } } }, { "track": { "artists": [ {name:"Moondog"} ], "album": { images: [ { url:"https://i.scdn.co/image/ab67616d00001e023a0951de417a5979e6480a5e", width: 500 } ] } }, }, { "track": { "artists": [ {name:"Bobby Hutcherson"} ], "album": { images: [ { url:"https://i.scdn.co/image/ab67616d00001e0228f4ac69bc17c2899b596318", width: 500 } ] } }, }, { "track": { "artists": [ {name: "London Grammar"} ], "album": { images: [ { url:"https://i.scdn.co/image/ab67616d00001e028e411f06d11a04c99df55247", width: 500 } ] } } } ] } })34:T463b,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 = ` ` 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 ` ` 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 '"'; } }); } }35:[] 31:{"id":"b27c99e27ce4b43d","slug":"svg-to-png","title":"SVG to PNG","thumbnail":"541a8e65047c3c380c7ece8becaed7db5a065806093831638b27a129cbfdeecb","access_level":"public","create_time":"$D2020-07-23T07:12:38.126Z","update_time":"$D2020-07-27T09:56:49.341Z","view_time":null,"first_public_time":"$D2020-07-23T07:30:37.538Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"208a6363a0816f4c","login":"sorig","name":"Esben Sørig","avatar_url":"https://avatars-next.observableusercontent.com/09d339d7678aa2d99a4391408955010f89ef5da7518a7502da0f398daa3cbc77","tier":"starter_2024"},"version":57,"publish_version":57,"role":null,"authored":false,"authors":[{"type":"individual","id":"9d582f11e393b9d8","login":"sorig","name":"Esben Sørig","avatar_url":"https://avatars-next.observableusercontent.com/09d339d7678aa2d99a4391408955010f89ef5da7518a7502da0f398daa3cbc77","tier":null}],"members":[{"type":"individual","id":"9d582f11e393b9d8","login":"sorig","name":"Esben Sørig","avatar_url":"https://avatars-next.observableusercontent.com/09d339d7678aa2d99a4391408955010f89ef5da7518a7502da0f398daa3cbc77","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"SVG to PNG","cells":[{"id":0,"value":"md`# SVG to PNG\n\nThis is based on [Mike Bostock's code](https://observablehq.com/@mbostock/saving-svg). The main addition to his code is dealing with Safari's buggy behaviour when the SVG has \\`image\\` elements (on both macOS and iOS). Safari doesn't render those images unless the browser has done it once before. Here I'm drawing two images that contain some of the same \\`image\\` elements. Without the fix, Safari would draw the images in one photo but not the other, depending on which is rendered first. \n\nI fixed the issue with a hack to detect Safari and re-render the image in that case.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"mood_description = 'Upbeat chill';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"photos = new SocialPhoto(playlist, mood_description)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"