HTML5キャンバスイメージをjsonファイルとして保存する方法

こんにちは私はHTML5キャンバスを初めて使用しています。キャンバスイメージをJSONファイル（Jsonファイルも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>

する必要があります（私はドラッグを行い、必要にJSONファイルとして修正レイアウトを保存するためにした後、ここでは（キャンバスレイアウトの後半で機能をドロップするつもりです最初私は、JSONファイル）としてキャンバスレイアウトを変換するように頼ま）保存キャンバスレイアウト以下のような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

あなたはこれをfollo翼の道...

<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ファイルとして保存する方法

答えて

関連する問題