如何顯示來自畫布集合的圖像？

開始與如何顯示來自畫布集合的圖像？

x = document.getElementsByTagName('CANVAS');

對於x [n]的返回是[對象HTMLCanvasElement]。

Display Content of a List Item

顯示列表項的內容可以用的innerHTML來完成，但我一直無法找到，其中顯示的畫布項目的內容的例子。

如何訪問x [n]的內容以顯示畫布？

來源

2016-07-28 JimM

如果我正確地理解了這個問題，您正試圖在畫布上繪製圖像。但請注意，HTML中的canvas元素由腳本填充，而不是''''標籤之間的內容。我的方法是從數組中獲取canvas元素，並將其附加到文檔中的某個位置。然後檢索畫布的內容，運行腳本。那是你正在嘗試做什麼？ – AgataB

@AgataB，你是對的。這就是我想要做的。我相信集合的行爲 - 或行爲不當 - 與數組不同。我對Image＆dataURL有一個很好的理解，但畫布不會以相同的方式呈現。您正朝着正確的方向前進，告知canvas元素由腳本填充。但是，如何訪問腳本？ – JimM

腳本通常在''標籤內，但是在這一點上，將畫布存儲爲圖像數據可能更簡單/更快捷/更簡單？ http://www.w3schools.com/tags/canvas_getimagedata.asp這取決於你從哪裏得到數組。 ''可能包含一堆無關緊要的東西。 – AgataB

下面是一個示例HTML文件，其中顯示了輸出相關數據的各種不同方法。我已經展示瞭如何從隱藏的畫布中獲取數據，但是您可以很容易地從實例化的畫布元素或它們的數組中獲取數據。我已經展示瞭如何帆布數據複製到另一個畫布，一個形象，一個新的窗口/選項卡，然後到控制檯：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Canvas Test</title> 
     <meta charset="UTF-8"> 
     <script> 
      var canvas; 
      var canvasHidden; 
      var img; 
      var ctxHidden; 
      var ctx; 

      function init() { 
       console.log('init'); 
       canvasHidden = document.getElementById('canvasHidden'); 
       canvas = document.getElementById('canvas'); 
       img = document.getElementById('img'); 
       ctxHidden = canvasHidden.getContext('2d'); 
       var imgToLoad = new Image(); 
       imgToLoad.onload = function(event) { 
        ctxHidden.drawImage(event.target, 0, 0, canvasHidden.width, canvasHidden.height); 
       }; 
       imgToLoad.src = "Example.jpg"; 

       canvas.width = canvasHidden.width; 
       canvas.height = canvasHidden.height; 
       ctx = canvas.getContext('2d'); 
      } 

      function toCanvas() { 
       ctx.putImageData(ctxHidden.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height), 0, 0); 
      } 

      function toImage() { 
       img.src = canvasHidden.toDataURL(); 
      } 

      function toTab() { 
       window.open(canvasHidden.toDataURL()); 
      } 

      // Warning: this can take quite some time depending on the size of your image. 
      // You may wish to only show limited pixel data, depending on your needs. 
      function toConsole() { 
       // Show all data on the console... 
       var data1 = ctxHidden.getImageData(0, 0, canvasHidden.width, canvasHidden.height).data; 
       console.log(data1); 

       // Or just a single pixel (can easily be amended to display a small range of pixels instead)... 
       var x = 32; 
       var y = 25; 
       var data2 = ctxHidden.getImageData(x, y, 1, 1).data; 
       for (var i = 0; i < data2.length; i += 4) { 
        console.log('Pixel data at [' + x + ', ' + y + ']:', data2[i], data2[i + 1], data2[i + 2], data2[i + 3]); 
       } 
      } 

      window.onload = init; 
     </script> 
    </head> 
    <body> 
     <canvas id="canvasHidden" style="display:none;"></canvas> 
     <canvas id="canvas"></canvas> 
     <img id="img" src="" alt="Will receive image data"> 
     <br> 
     <button onclick="toCanvas();">To Canvas</button> 
     <button onclick="toImage();">To Image</button> 
     <button onclick="toTab();">To Tab</button> 
     <button onclick="toConsole();">To Console</button> 
    </body> 
</html>

信息上getImageData這裏：http://www.w3schools.com/tags/canvas_getimagedata.asp

信息上toDataURL這裏： https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

來源

2016-07-28 18:07:08 ManoDestra

如何顯示來自畫布集合的圖像？

回答

相關問題