At Redbubble, we are dependent on artists uploading new designs
and illustrations. Naturally, we’d like to make this as easy as possible.
Previously, the process to do this was to download a template, position their work offline, upload, save, check the final product and repeat. For designs that need to be in a particular position this could be an extremely painful process!
In order to lower the hurdle for new users and decrease the frustration level for our long-time artists, we introduced a new uploader which takes away the need for templates and allows for preview and positioning of the design on the product before upload.
The final interface
This is the new widget artists see and use before uploading their design to our server. They can preview the work on all available styles and colours, as well as change the size and re-position it until it’s in the perfect spot.
FileReader are a couple of HTML5 libraries which allow us to (a) submit multi-part form data through AJAX and (b) read and understand data submitted using a file input.
Canvas we can interactively display and interact with the
Image object that was read into Memory using the aforementioned
DataURL using the
For this post, we will not go into much detail about all the parts, there are decent tutorials out there on how
FileReader and interacting with a Canvas work, but instead we will talk a bit more about how we get from the preview canvas
to the final form data.
“Blobbing the Canvas”
In order to submit the final design to our server, we need to add it to the
FormData object that is submitted via AJAX. The
Canvas W3C reference defines a
toBlob function which provides a
Blob that can be directly appended:
var canvas = $("var formData = new FormData();
// ... set dimensions and draw design on canvas ...
<span class="kd">var</span> <span class="nx">formData</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FormData</span><span class="p">();</span>
formData.append("field-name", blob, "upload.png");
toBlob always needs a
FileCallback which receives the final blob data. Optionally, it takes the MIME type the
Blob should be encoded in. Unfortunately only Firefox implements the
toBlob function natively, but all other browsers get the functionality through a Canvas to Blob polyfill library.
Want to know more?
This was just a high level overview of all the parts involved, so if you have a question about a certain library and how it’s used, please leave a comment. And of course you can try it out for yourself by signing up for an account
on Redbubble to be able to add your own work!