hi i have to covert a set of images to a json object.But, as a first step i was trying to do it for a single image but i don't know whether the json object is created or not.please help me to check whether the object is created. this is the code:
<!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>
hi i have to covert a set of images to a json object.But, as a first step i was trying to do it for a single image but i don't know whether the json object is created or not.please help me to check whether the object is created. this is the code:
<!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>
- 2 google./#q=how+to+use+javascript+console – user2033671 Commented Jan 11, 2014 at 5:02
- 1 ... Why the heck are you mentioning JSON? – SamB Commented Jan 11, 2014 at 5:21
-
1
This is a valid question. How can we get a string out of
canvas ImageData? – lucusp Commented Oct 8, 2014 at 20:47
1 Answer
Reset to default 3<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);
demo: http://jsfiddle/LcnbX/
ctx.getImageData() will return an object JSON.stringify(data) will generate json string for you(see the console)