如何将HTML5 Canvas图像转换为JSON对象？

Question

如何将HTML5 Canvas图像转换为JSON对象？

3

嗨，我需要将一组图像转换为JSON对象。但是，作为第一步，我正在尝试将其应用于单个图像，但我不知道这样是否会创建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>

- ambrosia1993

2

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

1

你为什么要提到JSON？ - SamB

1

这是一个有效的问题。我们如何从“canvas ImageData”中获取一个字符串？ - lucusp

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- qiu-deqing · Accepted Answer

<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(data)能够为您生成json字符串(请查看控制台)