Outputting Html5 Canvas As An Image, Howto?

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 quest

Solution 1:

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
    *
    *
    */functiondataURItoBlob(dataURI, callback) {
        // convert base64 to raw binary data held in a string// doesn't handle URLEncoded DataURIsvar byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0) {
            byteString = atob(dataURI.split(',')[1]);
        } else {
            byteString = unescape(dataURI.split(',')[1]);
        }

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

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

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

   functiongetAsJPEGBlob(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;
        }
    }

Solution 2:

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