だから私は HTML と文字通り Canvasをいじっていました。これは基本的にあなたのために画板を作成するだけで、それを手に入れたので、私のページにエクスポートボタンがあります。このボタンを押すと、現在、画像のある新しいページのみが開きます。私が達成したいのは、誰かがボタンを押したときにファイルをウェブサーバーにローカルに保存することです。
図面を開く行は次のとおりです。
window.open(lc.getImage().toDataURL());
これを達成する方法はありますか?
これが私の完全なコードです。
<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>