Mr Speaker

Everything has already been done on the internet. I know that, that's why I never check to see if an idea has been done before I do it. I'd just never do anything otherwise. And here is such a project. It's called "lowersrc: Loren Ipsum for images". Lowersrc dynamically generates images for use in prototyping or wireframing or whatever it's called these days.

To use lowersrc, grab the lowersrc.js file and add it to your project - then, simply add regular ol' image tags to your page - but give them the class lowersrc. They'll get turned into the familiar wireframe-y "cross in a mother f-ing box". That's it.

There are a bunch of ways to customise it - go check out the details (and more on why it's potentially useful) on the lowersrc GitHub page. The rest of this post is just about the technicals, so is of little concern to anyone. But thanks for stopping by!

Ok, so, lowersrc works by grabbing all the images on the page with the class lowersrc. It then iterates over each one - creating a canvas image based on it's dimensions. The canvas image is filled with the user's requirements (text, colours, borders, circles and what not) and then it's converted to base64 and set as the image URL. Actually, the image above is the output from the code - I just did "copy image url" on it on the github page.

The drawing is simple enough - just lines, text (with a bit of measuring for centering), and rectangles. One of the options is to fill a circle - I was going to explain the "algorithm" here, but this post is quite long enough already, so I think I'll do that later. At any rate, this whole experiment is a fun example of how HTML5 canvas is pretty nifty, I think.

The last thing left to discuss is the name. Lowersrc. I only started this project because I thought of the name, and then, after I was done I realised that the name was terrible - only about 5 old guys with big beards would understand what I was even talking about. I need to make friends with someone in marketing I tell you.