如何以用户友好的方式在计算机上保存从画布转换的图像？

Question

I'm using Nihilogic's library Canvas2Image to convert canvas drawings to PNG, and to give the users of my application the possibility to download that image.

What I need is to be able to give the downloadable file a name and the png extension (eg "goalboard.png") and not have it download just as an octet stream with no recognizable extension and the name "download", because the average Joe won't know what to do with such a file. And I need to do this on the client-side, because sending that byte stream to the server, depending on the quantity of data in it, can take up to 20 seconds (it's a big canvas!). Not to mention retrieving the image afterward...

So, how do I do this?

Answer 1

One of these should solve your problem (with canvas you can extract the image in base64 format):

• Using HTML5/Javascript to generate and save a file
• Reading a local file, encoding to base64, I would like to give the user an option to save the result to file

Answer 2

I had a big RaphaelJs canvas too and needed to allow the user to run a script that would save lots of canvas as png images. I tried to transform my raphael into an svn, then my svg to a png and then using wget but that of course didn't work because my canvas where generated by javascript and wget can't deal with that. In the end I realised that I could just have my webapp to build a page with just the svg canvas and use phantomjs ( a headless browser) to save it as a png. It works briliantly.

It is as simple as that. 1. Make your webapp to build a page with just the svg canvas. 2. Create a svgToPgn.js file with the following code :

var page = require('webpage').create(); page.open('URL_TO_YOUR_HTML_PAGE', function() { page.render('PATH_TO_PNG/example.png'); phantom.exit(); }); 3. Download Phantom ( http://phantomjs.org ), unzip it and in the bin directory you will find the phantomjs executable. Run : ./phantomjs svgToPgn.js Your png file will be saved in : PATH_TO_PNG/example.png

Answer 3

And I need to do this on the client-side

Well that requirement kind of kills your chances. Sorry.

You can't do what you want to do, the best you've got is displaying the image and telling the user to right-click save-as.