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
Share Improve this question asked Jan 8, 2012 at 19:42 buzibuzibuzibuzi 7343 gold badges15 silver badges27 bronze badges 3- 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
Reset to default 6Getting 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