HTML5 Canvas沒有方法'toDataURL'

Question

我的代碼是這樣的

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

當我單擊canvasImg拋出錯誤

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

我在這里弄了個小提琴，有人能指出出什么問題了嗎？

Answer 1

演示

document.getElementsByTagName返回元素對象的數組，並且沒有數組對象具有toDataUrl方法

代替這個

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

采用

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

Answer 2

    function myFunction() {
         var canvas = document.getElementById("myCanvas");
         var context = canvas.getContext("2d");
         var img = document.getElementById("canvasImg");
         context.drawImage(img, 0, 0);
    }

HTML5 Canvas沒有方法'toDataURL'

問題描述

2 個解決方案

解決方案1
5 已采納 2013-11-01 07:33:50

解決方案2
2 2013-11-01 07:39:58

HTML5 Canvas沒有方法&#39;toDataURL&#39;

問題描述

2 個解決方案

解決方案1 5 已采納 2013-11-01 07:33:50

解決方案2 2 2013-11-01 07:39:58

HTML5 Canvas沒有方法'toDataURL'

解決方案1
5 已采納 2013-11-01 07:33:50

解決方案2
2 2013-11-01 07:39:58