如何將html5畫布圖像轉換爲json對象？

嗨，我不得不將一組圖像轉換爲json對象。但是，作爲第一步，我試圖爲單個圖像做這件事，但我不知道json對象是否已創建或不是。請幫助我檢查對象是否被創建。這是代碼：如何將html5畫布圖像轉換爲json對象？

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset=utf-8 /> 
    <title>HTML5 Example: Canvas</title> 
<script> 
     function drawOnCanvas() { 
     var ctx=document.getElementById("mycanvas").getContext('2d'); 
     var image=new Image(); 
     image.src="2000.png"; 
     image.onload=function() { 
      ctx.drawImage(image,140,0); 
     } 
    imageData = ctx.getImageData(0, 0, mycanvas.width, mycanvas.height); 
    var jsontext=JSON.stringify(imageData.data); 
     } 
     window.addEventListener('load', drawOnCanvas, true); 
    </script> 

    </head> 
    <body> 
    <canvas width="1000" height="1000" id="mycanvas"></canvas> 
    </body> 
</html>

來源

2014-01-11 ambrosia1993

https://www.google.com/#q=how+to+use+javascript+console –

...爲什麼你會提到JSON？ – SamB

這是一個有效的問題。我們如何從'canvas ImageData'中獲得_string_？ – lucusp

<canvas id="canvas" width="400" height="400"> 
</canvas> 
<canvas id="c2" width="400" height="400"></canvas> 

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
ctx.beginPath(); 
ctx.rect(5, 5, 300, 250); 
ctx.stroke(); 
ctx.arc(150, 150, 100, 0, Math.PI, false); 
ctx.stroke(); 

canvas.addEventListener("click", function(){ 
    var data = ctx.getImageData(0, 0, canvas.width, canvas.height); 

    console.log(data); 
    console.log(JSON.stringify(data)); 

    var c2 = document.getElementById("c2"); 
    var ctx2 = c2.getContext("2d"); 
    ctx2.putImageData(data, 0, 0); 
}, false);

演示：http://jsfiddle.net/LcnbX/

ctx.getImageData（）將返回一個對象 JSON.stringify（數據）將產生JSON字符串你（看到控制檯）

來源

2014-01-11 05:47:37

感謝您的回覆，但我沒有得到第二張圖片，我不知道爲什麼 – ambrosia1993

您點擊第一張圖片。事件監聽器將在第一個畫布中獲取數據並將其渲染到第二個畫布 –

不，我沒有得到它 – ambrosia1993

如何將html5畫布圖像轉換爲json對象？

回答

相關問題