The initial idea was to have a website where you could easily drop in an image and resize it, crop it or meme it. This came out of a few thoughts I had:
First of all, there are competitors out there (like Canva). More and more big time people like Adobe, Google or Microsoft are allowing more editing as well in the browser.
Second, with all the work that this would take, I couldn’t think of a monetization strategy besides ads. And I don’t like ads (I block them myself). I do give back to open source and host a number of free products already for the internet. I didn’t want to add on more cost + load.
Third, I have other ideas that I want to go after. I thought this was cool, but the fact that I haven’t gotten back to it since I first started it kind of indicates that I’m not interested.
Not only do I want to talk about the user-facing features, but I want to pin-point why those were technically interesting or difficult.
First, and very least, I was super excited about using CSS animations to move over the logo from the center to the side, like this.
When you engaged the app, it would try to minimize the landing page information so you had the most useful information available.
Next was the actual image loading functionality. You could paste it from your clipboard. If the pasted item was identified as an image, it’d import it into the app. You could also choose to load it from the normal file dialog - or - to drag and drop it onto the app. Finally, loading from the URL. To try to get around some of the cross-site request issues, loaded it as a javascript Image
instead of fetching it.
When the main image was loaded in, the background ‘transparency’ was created using CSS gradients. This way another image didn’t have to be loaded to indicate the transparency of the loaded images.
The image was loaded in as a canvas item. This allows us to manipulate it as well as generate data blobs from it.
I had wanted to add in some functionality for editing the image colors with something like CanmanJS. I did allow Meme editing with a browser-font and some styling. It was important to note that the initial overlay was done NOT on the canvas (because that would actually be more complicated to allow undo). It’s just overlayed with CSS. When the output was generated, that’s when it was written to the Canvas. Otherwise we’d have to version the canvas on every single keystroke - and that would be pretty browser-intensive.
Also, the image was zoomed if it was larger than the viewport. The original size image was kept in data, but the representation of it was zoomed out.
Then you could download the image or open it in a new tab. This was actually quite complicated because of the blob data that needed to be created from the post-processed canvas. A lot of examples of image editing showed downloading it from a server, but I wanted to not send anything to the back-end.
Let’s see a quick animated gif of it being used.
And the final download from that.
You can find the archived source code on Github.
I had wanted to do the following things:
Well, I’m going to let the domain expire and then this project is archived. You can grab the Github source if you’d like, or make a new copy of it. Let me know if you want to take it over sooner than it expires.