html5 캔버스 이미지를 json 개체로 변환하는 방법은 무엇입니까?

안녕하세요, json object.But에 이미지 세트를 숨겨야합니다. 그러나 첫 번째 단계는 하나의 이미지로 처리하려고했으나 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

이것은 유효한 질문입니다. 어떻게 캔버스 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 문자열을 생성 할 객체 JSON.stringify (데이터)를 반환합니다

출처

2014-01-11 05:47:37

ur 답장을 보내 주셔서 감사하지만 두 번째 이미지를 얻지 못했고 왜 첫 번째 이미지를 클릭했는지 알 수 없습니다. – ambrosia1993

. 이벤트 리스너는 첫 번째 캔버스에서 데이터를 가져 와서 두 번째 캔버스로 렌더링합니다. –

아니요, 알 수 없습니다. – ambrosia1993

html5 캔버스 이미지를 json 개체로 변환하는 방법은 무엇입니까?

답변

관련 문제