如何將HTML5畫布圖像保存爲json文件

嗨，我是新來的HTML5畫布我畫在畫布上的矩形框名稱我想保存畫布圖像爲JSON文件（Json文件也在下面給出我想如何json文件）（我會做的阻力，並在畫布佈局後降的功能後，需要修改的佈局保存爲JSON文件（這裏首先我問到Canvas佈局轉換爲JSON文件））如何將HTML5畫布圖像保存爲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 
} 
]

來源

2017-04-03 mohan raj

您可以在下面找到這個翼路...

<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>

來源

2017-04-03 15:10:41

如何將HTML5畫布圖像保存爲json文件

回答

相關問題