如何将 HTML5 画布图像保存为 json 文件答案

【问题标题】：How to save HTML5 canvas image as json file如何将 HTML5 画布图像保存为 json 文件
【发布时间】：2017-04-03 12:59:20
【问题描述】：

嗨，我是 HTML5 画布的新手，我在画布中绘制了矩形框，名称为我想将画布图像保存为 JSON 文件（Json 文件也在下面给出我想要的 json 文件）（我将进行拖放在需要将修改后的布局保存为 JSON 文件后，稍后在 Canvas 布局中使用的功能（这里首先我要求将 Canvas 布局转换为 JSON 文件））

<html>
<body>
    <canvas id="NodeList" name="NodeList" style="border:2px solid black;" width="1078" height="450"></canvas>
</body>
</html>
<script>
var c = document.getElementById("NodeList");
var ctx = c.getContext("2d");
ctx.rect(3,3,40,40);
ctx.fillText(1, 15, 25);
ctx.rect(46,3,40,40);
ctx.fillText(2, 65, 25);
ctx.rect(89,3,40,40);
ctx.fillText(3, 105, 25);
ctx.rect(3,46,40,40);
ctx.fillText(4, 13, 70);
ctx.rect(46,46,40,40);
ctx.fillText(5, 56, 70);
ctx.rect(89,46,40,40);
ctx.fillText(6, 99, 70);
ctx.rect(606,3,40,40);
ctx.fillText(7, 616, 25);
ctx.rect(649,3,40,40);
ctx.fillText(8, 659, 25);
ctx.rect(821,3,40,40);
ctx.fillText(9, 831, 25);
ctx.rect(864,3,40,40);
ctx.fillText(10, 874, 25);
ctx.font="15px Verdana";

ctx.fillText('Shop', 415,205);

ctx.fillText('sweets', 55, 110);
ctx.fillText('Zone 1', 55, 130);

ctx.fillText('fried grams', 780, 110);
ctx.fillText('Zone 2', 780, 130);
ctx.stroke();
</script>

需要将 Canvas 布局输出保存为 JSON 文件，如下所示

[
{
  "x":3,
  "y":3,
  "height":40,
  "width":40,
  "binnum":1,
  "binx":13,
  "biny":25
 },
 {
  "x":46,
  "y":3,
  "height":40,
  "width":40,
  "binnum":2,
  "binx":56,
  "biny":25
 },
 {
  "x":89,
  "y":3,
  "height":40,
  "width":40,
  "binnum":3,
  "binx":99,
  "biny":25
 },
 {
  "x":3,
  "y":46,
  "height":40,
  "width":40,
  "binnum":6,
  "binx":13,
  "biny":70
 },
 {
  "x":46,
  "y":46,
  "height":40,
  "width":40,
  "binnum":7,
  "binx":56,
  "biny":70
 },
 {
  "x":89,
  "y":46,
  "height":40,
  "width":40,
  "binnum":8,
  "binx":99,
  "biny":70
 },
 {
  "x":606,
  "y":3,
  "height":40,
  "width":40,
  "binnum":10,
  "binx":616,
  "biny":25
 },
 {
  "x":649,
  "y":3,
  "height":40,
  "width":40,
  "binnum":11,
  "binx":659,
  "biny":25
 },
 {
  "x":821,
  "y":3,
  "height":40,
  "width":40,
  "binnum":15,
  "binx":831,
  "biny":25
 },
 {
  "x":864,
  "y":3,
  "height":40,
  "width":40,
  "binnum":16,
  "binx":874,
  "biny":25
}
]

【问题讨论】：

标签： html5-canvas

【解决方案1】：

您可以通过以下方式实现...

<html>

<body> 
  <canvas id="NodeList" name="NodeList" style="border:2px solid black;" width="1078" height="450"></canvas>
  <script>
    
    let c = document.getElementById("NodeList");
    let ctx = c.getContext("2d");
    
    let data = [{
        rect: [3, 3, 40, 40],
        text: [1, 15, 25]
    }, {
        rect: [46, 3, 40, 40],
        text: [2, 65, 25]
    }, {
        rect: [89, 3, 40, 40],
        text: [3, 105, 25]
    }, {
        rect: [3, 46, 40, 40],
        text: [4, 13, 70]
    }, {
        rect: [46, 46, 40, 40],
        text: [5, 56, 70]
    }, {
        rect: [89, 46, 40, 40],
        text: [6, 99, 70]
    }, {
        rect: [606, 3, 40, 40],
        text: [7, 616, 25]
    }, {
        rect: [649, 3, 40, 40],
        text: [8, 659, 25]
    }, {
        rect: [821, 3, 40, 40],
        text: [9, 831, 25]
    }, {
        rect: [864, 3, 40, 40],
        text: [10, 874, 25]
    }];
    
    ctx.font = "15px Verdana";
    ctx.fillText('Shop', 415, 205);
    ctx.fillText('sweets', 55, 110);
    ctx.fillText('Zone 1', 55, 130);
    ctx.fillText('fried grams', 780, 110);
    ctx.fillText('Zone 2', 780, 130);

    function getJSON(ctx, data) {
        let ja = [];
        data.forEach(function(e) {
            let ra = e.rect,
                ta = e.text;
            ja.push({
                "x": ra[0],
                "y": ra[1],
                "height": ra[2],
                "width": ra[3],
                "binnum": ta[0],
                "binx": ta[1],
                "biny": ta[2]
            });
            ctx.strokeRect(ra[0], ra[1], ra[2], ra[3]);
            ctx.fillText(ta[0], ta[1], ta[2]);
        });
        return ja;
    }
    
    let json = getJSON(ctx, data);
    console.log(json);
    
  </script>
</body>

</html>

【讨论】：