Sketch.jsデータをエクスポート/インポートする方法（イメージとしてインポート、透明な線は不透明）

Question

私はSketch.js（http://intridea.github.io/sketch.js/）を使って簡単な描画キャンバスを作成しています。

私はキャンバスに画像を読み込んで（私のウェブサイトのユーザーが描画して保存した後、何かの時間が戻ってきて編集できるように）画像を読み込もうとしましたが、問題が発生しましたが、私はthis.el.width = this.canvas.width()他のSOの質問（html5 canvas background image disappear on mousemove）で見たように、redraw()の機能、Sketch.jsファイルの中にあります。これで、ユーザーは自分の図面を編集できます。

問題は、この行をコメントアウトした後で、マーカーの色を半透明に設定しようとしたときに不透明（または別の線を描くときに不透明に変換されます）です。

あなたはここにこれを見るチェックできますhttps://jsfiddle.net/1fhuwdb9/4/

は、誰もがこの問題を解決する方法を知っていますか？ ありがとう、すべて、非常に！

Answer 1

何かを描くと、イメージはスクリプトによって再描画されます。その行をコメントアウトしたので、古いイメージは消去されず、今では積み重なったイメージが多数あります。スクリプトは機能し、透明な線を描画していますが、レイヤーが多数表示されるため、透明部分はほとんど不透明になります。

スケッチのコンテンツをインポートまたは保存するには、その行にコメントする必要はありません。関数内では、 "this.actions"はすべてのユーザーの動きを格納します。データベースに保存する必要があります。おそらくはjsonとし、最初にロードしてdrawを呼び出します。

これを実際にSketchに取り入れるために、スケッチスクリプトにいくつかのfuntionsを追加します。

Sketch.prototype.export = function() { 
    $.post('yourfile.php', { data: JSON.stringify(this.actions) }, function (message_back) { alert(message_back); }); 
}; 

それはあなたがyourfile.phpにプリントアウトするかを画面上のすべてのJSONへのアクションと$_POST["data"]などyourfile.phpにPOST、およびアラートを変換します

はSketch.prototype.download前に、この機能を追加します。 yourfile.phpでは、データベース内にサーバーを保存する必要があります。今

、if ($(this).attr('data-download')) {前にこれを追加します（あなたは、新たな付加機能の前に3-4行でこれを見つけることができます）：結果の画像をダウンロードするような単純なエクスポートを作るのに役立ちます

if ($(this).attr('data-export') != undefined) { 
    sketch.export(); 
} 

（のようなdata-downloadが、data-export）：

今

<a href="#the_id_of_canvas_here" data-export=''>Save your drawing.</a> 

、のインポート機能を構築してみましょう：

は、これらの李を追加this.action = [];後のNE（あなたがライン48のまわりでそれを見つけることができます）：

if ($(this.canvas).attr('data-actions') != undefined) { 
    // Load json and parse it 
    this.actions = JSON.parse($(this.canvas).attr('data-actions')); 
    // Redraw image by using the data 
    this.redraw(); 
} 

それはcanvas要素のdata-actions属性からデータを取得し、JSONからそれを解析し、新しいイメージのアクションのリストにアクションを追加し、次に画像を描画します。

キャンバスにdata-actions='HERE COMES THE JSON WHICH YOU SAVED ON THE SERVER ON DB'を追加するだけです（例：<canvas id="the_id_of_canvas_here" data-actions='HERE COMES THE JSON WHICH YOU SAVED ON THE SERVER ON DB' width="300" height="300"></canvas>）。

注：ファイルまたはデータベース内の$_POST["data"]を保存するとき、この（Fastest way to check if a string is JSON in PHP?とSanitize JSON with php）をサニタイズすることを忘れないでください。