outputting HTML5 canvas as an image, howto?

Question

I have already looked into this tutorial on how to use canvas in HTML5 to create a clipping mask. http://www.benbarnett.net/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

Possible duplicate of http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf — Dan Blows, Jan 08 '12 at 19:44

score 6 · Accepted Answer · answered Jan 08 '12 at 23:38

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.com/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 component
        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;
        }
    }

Further source can be found here https://github.com/miohtama/Krusovice/blob/master/src/tools/resizer.js#L51 — Mikko Ohtamaa, Jan 08 '12 at 23:39

score 0 · Answer 2 · answered Jan 08 '12 at 19:45

0

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

answered Jan 08 '12 at 19:45

LoveAndCoding

7,857
2
31
55

Not yet anyways, it does look like we will start to see file writing APIs in browsers eventually. – Matt Greer Jan 08 '12 at 23:40
@MattGreer: That seems like a pretty bad idea, security-wise. – You Jan 08 '12 at 23:44
@You Thankfully I'm not the one making those decisions :) – Matt Greer Jan 09 '12 at 00:18
luckily i only need to save it on the server – buzibuzi Jan 09 '12 at 09:43

outputting HTML5 canvas as an image, howto?

2 Answers2

Linked