I have already looked into this tutorial on how to use canvas in HTML5 to create a clipping mask. /

The question i have now is it possible to save the canvas as an image (including the mask effect) ?

thanks

I have already looked into this tutorial on how to use canvas in HTML5 to create a clipping mask. http://www.benbarnett/2011/06/02/using-html5-canvas-for-image-masks/

The question i have now is it possible to save the canvas as an image (including the mask effect) ?

thanks

• javascript
• html

• 2 Possible duplicate of stackoverflow./questions/923885/… – Dan Blows Commented Jan 8, 2012 at 19:44
• Do you want to save the image on the server or the client? – Dagg Nabbit Commented Jan 8, 2012 at 21:37
• Basically i want to save it on the server – buzibuzi Commented Jan 9, 2012 at 9:42

2 Answers 2

Getting PNG output can be done with canvas.toDataURL().

It is also possible to get JPEG output on Chrome/Firefox. Below is a code to convert to JPEG data as HTML5 Blob.

   /**
    * http://stackoverflow./questions/4998908/convert-data-uri-to-file-then-append-to-formdata/5100158
    *
    *
    */
    function dataURItoBlob(dataURI, callback) {
        // convert base64 to raw binary data held in a string
        // doesn't handle URLEncoded DataURIs

        var byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0) {
            byteString = atob(dataURI.split(',')[1]);
        } else {
            byteString = unescape(dataURI.split(',')[1]);
        }

        // separate out the mime ponent
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

        // write the bytes of the string to an ArrayBuffer
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }

        // write the ArrayBuffer to a blob, and you're done
        var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
        var bb = new BlobBuilder();
        bb.append(ab);
        return bb.getBlob(mimeString);
    }

   function getAsJPEGBlob(canvas) {
        if(canvas.mozGetAsFile) {
            return canvas.mozGetAsFile("foo.jpg", "image/jpeg");
        } else {
            var data = canvas.toDataURL('image/jpeg', 0.7);
            var blob = dataURItoBlob(data);
            return blob;
        }
    }

canvas.toDataURL();

is a function to get you a Data URL which you can put into an image tag. From there you can save it.

If you're looking to automatically save it to the harddrive, that isn't possible in standard JavaScript