Question

从字面上看，Canvas导出图像的官方示例不起作用。

http://literallycanvas.com/examples/export.html

从网页复制完全相同的代码并将其放在自己的网页上之后，它仍然无法正常工作。

在官方页面上，将出现一个新的about：blank页面。

在我的网页上，它刷新网页。

我的网页的源代码（我不知道是否可以发布我的网页的网址）：

<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>

我在控制台中收到一条错误消息：$ not defined。

我在脚本之前添加了它

<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)

我的网页的网址：http://chaldea.biz/canvas.html

从字面上看画布官方示例“导出图像”不起作用

0 个答案: