javascript - method to save file in html? -
so have been messing around html , literally canvas, creates drawing board you, , got have export button on page. when hit button opens new page image; want accomplish have save file locally on webserver when hits button.
the line opens drawing is:
window.open(lc.getimage().todataurl());
is there way accomplish this?
here's full code.
<html> <head> <!-- stylesheet --> <link href="/draw/literallycanvas-0.4.1/css/literallycanvas.css" rel="stylesheet"> <!-- dependency: react.js --> <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.10.0/react-with-addons.js"></script> <!-- literally canvas --> <script src="/draw/literallycanvas-0.4.1/js/literallycanvas.js"></script> </head> <body> <!-- widget goes. can css it. --> <!-- kick off --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></src> <script> // ma, no jquery! lc.init( document.getelementsbyclassname('literally')[0], {imageurlprefix: '/draw/literallycanvas-0.4.1/lib/img'} ); /* or if love jquery, $('.literally').literallycanvas({imageurlprefix: '/draw/literallycanvas-0.4.1/lib/img'}) */ </script> <div class="literally export"></div> <form class="controls export"> <input type="submit" data-action="export-as-png" value="export png"> </form> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function() { var lc = lc.init(document.getelementsbyclassname('literally export')[0]); $('.controls.export [data-action=export-as-png]').click(function(e) { e.preventdefault(); window.open(lc.getimage().todataurl()); }); }); </script> </body> </html>
you won't able save image webserver, on client side. best bet upload image after getting dataurl. question shows how that: how save html5 canvas image on server
Comments
Post a Comment