Clip Paint - Paint in the Browser
Fork and clone the repo. Then simply open the
index.html file in your browser.
The entire app is client-side. Nothing runs on a server.
Cool technologies used
Copy and pasting via keyboard shortcuts Ctrl+c and Ctrl+v are supported in the browser. Clip Paint tries to leverage that as much as possible. There is one limitation however - it is not possible to copy an image to the clipboard. Therefore, you must press the download button to obtain the final PNG.
Fortunately however, copy/paste codes work in the web app.
You see I copy the image base64 representation onto the clipboard as
In paste events I can grab that.
Canvas and SVG
The web app uses Canvas and SVG. They serve different purposes. The canvas, just as the name implies, is the drawing canvas. SVG is used to handle human interactions. For instance drawing a select box, clipping an image, dragging an image, dropping an image, resizing an image. Thanks to Ulrich-Matthias for building the excellent svg.js library. It greatly simplified implementing these operations.
Base64 encoded images
In HTML, images can be encoded in a base64 string and represented as a Data URL.
// The Data URL format data:[<mediatype>][;base64],<data> // A PNG image as a Data URL data:image/png;base64,/9j/4AAQSkZJR....
Clip Paint uses Data URLs extensively on
img and SVG
image elements by attaching them to the
Its easy to attach a base64 data url to an anchor tag. However there is a top limit different per browser. Fortunately dandavis wrote download.js to solve this problem. Even a large file can be downloaded client-side very easily.
Client-size image resize
The entire app is contained within one file
app.js. It is self documented.
Clip Paint does depend on a number of other libraries. These are: