Posted 7 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.

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Arne Hartherz
Last edit:
7 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