Posted over 4 years ago. Visible to the public. Repeats. Linked content.

Generating test images on the fly via JavaScript or Ruby

When you need test images, instead of using services like lorempixel Archive or placehold.it Archive you may generate test images yourself.

Here we build a simple SVG image and wrap it into a data: URI. All browsers support SVG, and you can easily adjust it yourself.
Simply set it as an image's src attribute.

JavaScript

Simple solution in modern JavaScript, e.g. for use in the client's browser:

Copy
function svgUri(text) { let svg = ` <svg width="320" height="240" xmlns="http://www.w3.org/2000/svg"> <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) }

See the attached JSFiddle for an example.

Ruby

If you like to do it on the server, here is some Ruby for you:

Copy
def svg_uri(text) svg = <<~SVG <svg width="480" height="270" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="480" height="270" 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> SVG "data:image/svg+xml;charset=utf8,#{ERB::Util.url_encode(svg)}" end

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:

Avatar
Arne Hartherz
Last edit:
10 months ago
by Arne Hartherz
Keywords:
svg, placeholder, image
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 short-lived cookies to improve usability.
Accept or learn more