So I have been messing around with HTML and Literally Canvas, which basically just creates a drawing board for you, and got it so I have an export button on my page. When you hit this button it currently only opens a new page with the image; what I want to accomplish is have it save the file locally on my webserver when someone hits the button.
The line that opens the drawing is:
window.open(lc.getImage().toDataURL());
Is there any way to accomplish this?
Here's my 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>
<!-- where the widget goes. you can do CSS to it. -->
<!-- kick it off -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></src>
<script>
// Look ma, no jQuery!
LC.init(
document.getElementsByClassName('literally')[0],
{imageURLPrefix: '/draw/literallycanvas-0.4.1/lib/img'}
);
/* or if you just 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 as 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>
