Posted 3 months ago. Visible to the public. Repeats.

Generating test images on the fly via JavaScript

When you need test images, instead of using services like lorempixel or you may generate test images yourself. You can do this via JavaScript.

Here is an ES6 function that generates a simple SVG image and returns it as a data: URI. All browsers support SVG, and you can easily adjust it yourself.

function svgUri(text) { let svg = ` <svg width="320" height="240" xmlns=""> <rect x="0" y="0" width="320" height="240" style="fill: #ddd; stroke: #666; stroke-width: 4;" /> <text x="50%" y="50%" font-size="24" text-anchor="middle" alignment-baseline="middle" fill="#666"> ${text} </text> </svg> ` return 'data:image/svg+xml;charset=utf8,' + window.escape(svg) }

You can simply set this as an image's src attribute. See the attached JSFiddle for an example.

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Author of this card:

Arne Hartherz
Last edit:
3 months ago
by Thomas Eisenbarth
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more