HTML5 Canvas没有方法'toDataURL'

Question

HTML5 Canvas没有方法'toDataURL'

Ath*_*hul 0 javascript html5 html5-canvas

我的代码是这样的

    <html>
  <head>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200" style="display:none;"></canvas>
    <img id="canvasImg" onclick="myFunction()" alt="Right click to save me!">
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        function myFunction() {
            var c = document.getElementsByTagName("canvas");
            // save canvas image as data url (png format by default)
            var dataURL = c.toDataURL();
            // set canvasImg image src to dataURL
            // so it can be saved as an image
            document.getElementById('canvasImg').src = dataURL;
        }
    </script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

当我点击canvasImg它抛出一个错误

Uncaught TypeError: Object #<NodeList> has no method 'toDataURL'

Run Code Online (Sandbox Code Playgroud)

我在这里做了一个小提琴任何人都可以指出什么是错的？

Answer 1

Sha*_*dow 5

DEMO

document.getElementsByTagName 返回元素对象的数组,没有数组对象具有方法toDataUrl

而不是这个

var c = document.getElementsByTagName("canvas");

Run Code Online (Sandbox Code Playgroud)

使用

 var c = document.getElementsByTagName("canvas")[0];

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，1 月前
查看次数：	5119 次
最近记录：	12 年，1 月前