1

Is there a way to capture an html canvas's content not as a data url as in the example below?

Capture HTML Canvas as gif/jpg/png/pdf?

The reason I want to do this is I want to convert a canvas's content into a jpeg and then convert the jpeg into a file type to use with the plupload library. The only solution I have been able to find so far is to go from the dataURL to a blob using BlobBuilder() then to a file.

https://developer.mozilla.org/en-US/docs/Web/API/BlobBuilder

The BlobBuilder api is not very robust and has been rendered obsolete. Can anyone think of a better way to do this. Or a better way to convert a dataURL to a jpeg using javascript.

Community
  • 1
  • 1
Ellery
  • 1,356
  • 1
  • 14
  • 22
  • 1
    take a look at https://github.com/blueimp/JavaScript-Canvas-to-Blob – Bogdan Savluk Jun 17 '14 at 22:38
  • If you are trying to upload the file, keeping it as base64 will work fine. What server side language are you using to process the upload? I had to do this in `php` for one of my projects, and its a simple 2 liner : `list(, $base64URI) = explode(',', $base64URI);file_put_contents('image.jpg',base64decode($base64URI);` – chiliNUT Jun 18 '14 at 03:51
  • @chiliNUT Im using java but I was trying to use pluploads client side image resizing as well and to add it to the queue and it needs to be a file object to do that. So to clarify I guess im asking is there a better way to make a base64 encoded image into a javascript file object. The library Bogdan posted seems like the best solution so far. I will try and implement it tomorrow and post the results. – Ellery Jun 18 '14 at 05:04

1 Answers1

0

You want .jpg?

Just use the .toDataURL option to create a .jpg instead of the default .png

myCanvas.toDataURL( "image/jpeg" );
markE
  • 102,905
  • 11
  • 164
  • 176
  • Sorry I should have clarified. I already am doing this. Im trying to get an end result of a jpeg java script file object from the base64 encoded result from the code you posted. – Ellery Jun 18 '14 at 05:12
  • I see. Then check out the FileSaveJS plugin. It will copy a canvas to the local filesystem and it impliments its own (more robust) version of blob: https://github.com/eligrey/FileSaver.js/ – markE Jun 18 '14 at 05:25