Буквально Canvas официальный пример экспорта изображений не работает.
http://literallycanvas.com/examples/export.html
После того, как я скопировал точно такой же код с веб-страницы и поместил его на мою собственную веб-страницу, он все равно сделалне работа.
На официальной странице появится новая страница about: пустая страница.
На моей веб-странице обновится веб-страница.
Исходный код моей веб-страницы (я неНе знаю, могу ли я опубликовать URL своей веб-страницы):
<html>
<head>
<!-- stylesheet -->
<link href="/static/css/literallycanvas.css" rel="stylesheet">
<!-- dependency: React.js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<!-- Literally Canvas -->
<script src="/static/js/literallycanvas.js"></script>
</head>
<body>
<!-- Canvas -->
<!-- where the widget goes. you can do CSS to it. -->
<!-- note: as of 0.4.13, you cannot use 'literally' as the class name.
sorry about that. -->
<div class="my-drawing"></div>
<p></p>
<!-- kick it off -->
<script>
LC.init(
document.getElementsByClassName('my-drawing')[0],
{imageURLPrefix: '/static/img'}
);
</script>
<!-- Export Image -->
<form class="controls export">
<input type="submit" data-action="export-as-png" value="Export as PNG">
</form>
<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>
В консоли появилось сообщение об ошибке: $ не определено.
И я добавил это перед сценарием
<script src="http://code.jquery.com/jquery.min.js"></script>
Появилось другое сообщение об ошибке:
literallycanvas.js:3626 Uncaught TypeError: Cannot read property 'children' of undefined
at Object.init (literallycanvas.js:3626)
at HTMLDocument.<anonymous> (canvas.html:38)
at j (jquery.js:3137)
at Object.fireWith [as resolveWith] (jquery.js:3249)
at Function.ready (jquery.js:3455)
at HTMLDocument.J (jquery.js:3496)
URL моей веб-страницы: http://chaldea.biz/canvas.html