├── saveme.php
├── README
├── example.html
└── canvassaver.js
/saveme.php:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/README:
--------------------------------------------------------------------------------
1 | A little helper object to allow for saving of a canvas tag to an image. It uses a server side script to save the image to avoid things like not being able to set a filename, and popping up scary looking dialogue boxes. For more in-depth explanation and example, see: http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/
2 |
3 | quick impl example:
4 |
5 |
6 |
--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | CanvasSaver example
4 |
5 |
6 |
7 |
8 |
34 |
35 |
--------------------------------------------------------------------------------
/canvassaver.js:
--------------------------------------------------------------------------------
1 | function CanvasSaver(url) {
2 |
3 | this.url = url;
4 |
5 | this.savePNG = function(cnvs, fname) {
6 | if(!cnvs || !url) return;
7 | fname = fname || 'picture';
8 |
9 | var data = cnvs.toDataURL("image/png");
10 | data = data.substr(data.indexOf(',') + 1).toString();
11 |
12 | var dataInput = document.createElement("input") ;
13 | dataInput.setAttribute("name", "imgdata") ;
14 | dataInput.setAttribute("value", data);
15 | dataInput.setAttribute("type", "hidden");
16 |
17 | var nameInput = document.createElement("input") ;
18 | nameInput.setAttribute("name", 'name') ;
19 | nameInput.setAttribute("value", fname + '.png');
20 |
21 | var myForm = document.createElement("form");
22 | myForm.method = 'post';
23 | myForm.action = url;
24 | myForm.appendChild(dataInput);
25 | myForm.appendChild(nameInput);
26 |
27 | document.body.appendChild(myForm) ;
28 | myForm.submit() ;
29 | document.body.removeChild(myForm) ;
30 | };
31 |
32 | this.generateButton = function (label, cnvs, fname) {
33 | var btn = document.createElement('button'), scope = this;
34 | btn.innerHTML = label;
35 | btn.style['class'] = 'canvassaver';
36 | btn.addEventListener('click', function(){scope.savePNG(cnvs, fname);}, false);
37 |
38 | return btn;
39 | };
40 | }
--------------------------------------------------------------------------------