CODEWITHSUNDEEP
imagekineticjssave
nevkatz
nevkatz

Reputation: 11

user-friendly method of saving images with kineticjs

Had a question about how to make image saving easier with kineticJS, which has, by the way, proved to be an awesome framework. With it, I created this app that enables teachers in our prof dev courses to create a classroom map and save it as an image:

http://courses.edtechleaders.org/html_cores/trainingcores/multimedia/classroom_app/

The issue is that a lot of teachers run into problems when the new window containing the image opens up. Some end up having the window blocked, saving the wrong file, or not being able to find the file. I was wondering if there was a way to have a file reference window open (or a save button appear) so that the user could save the image to his/her local machine with a click, without having to deal with a pop-up. I tried working in some code from here -

http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/

But I kept getting 'file not found' messages on the PHP files that I set up and other cryptic error messages. So I'm looking for a solution that we know meshes well with kineticJS (and hopefully uses minimal to no php.) Any help would be greatly appreciated!

Thanks!

Nevin

Upvotes: 0

Views: 464

Answers (1)

allenhwkim
allenhwkim

Reputation: 27738

These days, popup is not recommended and not supported by many browsers.

Furthermore, you cannot pick a location to save your image on your client machine. This is a big security issue.

Think about this, if you click this link, save a password program on users' machine. serious, right? Instead, I would recommend the following steps.

  1. add a hidden dialog div at the end of your html, or anywhere

    <div id="popup"></div>

  2. create an image and add to this popup, then show it up using JQuery UI. 

    stage.toDataURL({
   callback: function (dataUrl) {
      $("#popup").html( $("<img />").attr("src", dataUrl) );
      $("#popup").append("To save image, right-click, Save Image As");
      $("#popup").dialog();
    },
    mimeType: 'image/png',
    quality: 1
});

  3. I did not tested the above, but from my experience, it should work.

Upvotes: 1

Related Questions