如何将html5画布图像转换为json对象？ [英] how to convert a html5 canvas image to a json object?
本文介绍了如何将html5画布图像转换为json对象？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我必须隐藏一组图像到一个json对象。但作为第一步，我试图做一个单一的图像，但我不知道json对象是否创建或。我检查对象是否被创建。
这是代码：
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>
推荐答案
<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字符串（见控制台）
ctx.getImageData() will return an object JSON.stringify(data) will generate json string for you(see the console)
这篇关于如何将html5画布图像转换为json对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
