<canvas>データをサーバーに送信する方法

Question

<canvas>データをサーバーに送信する方法は2通りあるようです。 1つはcanvas.getImageData()を使用してピクセルの配列とその8ビットカラー値を取得することです。もう1つの方法は、canvas.toDataURL())を使用して添付ファイルを送信することです。この方法はdemonstrated hereです。

人々がキャンバスの図面を保存できるサイトを構築したいと考えています。どの方法がユーザーのスケーラビリティと高速化につながりますか？

Answer 1

オプションを開くには：fabric.jsを使用すると、fabric.jsキャンバスをJSONにシリアル化できます。

だけでなく、それは（後の段階で自分の画像を編集することができることは言うまでもありません）編集機能の追加の層を提供しますが、あなたが次のことを行うことができない：

var canvas = new fabric.Canvas('c'); 
canvas.add(
    new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }), 
    new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }), 
    new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' }) 
); 

今、あなたがしたいときこのキャンバスをシリアライズするには、ファブリックキャンバスオブジェクトのJSON.stringify関数を呼び出します。あなたは上記の例については、以下のような何か与え

JSON.stringify(canvas);

：その状態に戻ってキャンバスをシリアライズ

{ 
    "objects": [ 
     { 
      "type": "rect", 
      "left": 100, 
      "top": 100, 
      "width": 50, 
      "height": 50, 
      "fill": "#f55", 
      "overlayFill": null, 
      "stroke": null, 
      "strokeWidth": 1, 
      "scaleX": 1, 
      "scaleY": 1, 
      "angle": 0, 
      "flipX": false, 
      "flipY": false, 
      "opacity": 1, 
      "selectable": true 
     }, 
     ... 
    ] 
} 

---

ドは使用して逆転された：

var canvas = new fabric.Canvas('c'); 
canvas.loadFromJSON(yourJSONString); 

---

追加リソース：

Kitchen Sink Demo - フリーの図面を含む機能を表示します。それが同じ場合には私のために動作し、この試してみてください

Homepage

Answer 2

あなたはそれが

var datastring = $('#mycanvas')[0].toDataURL("image/png"); 

そしてXHRを介してサーバに至るまでその文字列を送信

var datastring = document.getElementById('mycanvas').toDataURL("image/png")); 

やjQueryの

と

、最速であるべきである .toDataURL()ことができます。

Answer 3

）その後自由描画のサイズと位置を変更する： - JSON.stringify(canvas);

全体のキャンバスで使用するためにJSONデータを取得するために

をし、 jsonからコードを再ロードするには -

canvas.clear(); 
canvas.loadFromJSON(json_string,canvas.renderAll.bind(canvas));