html5キャンバス描画/保存

Question

html5キャンバスをスライド注釈に変換しようとしています。私の目標は、スライドのImageをアップロードし、ユーザーがそれを描画してから保存することです。

Whats working：スライドをバックグラウンドイメージとしてアップロードして、ユーザーが描画できるようにしました。私はsave関数も働いています。

どうしたのですか：画像が保存されると、ユーザーが作成した図はそのまま残りますが、背景画像は保存された画像の一部になりません。

画像にキャンバスを保存し、その中にスライドの背景を保持する方法はありますか？おそらくそれは背景イメージではないと思われますか？ここで

私のコードの一部です：

キャンバス+ボタン：

<div id="main"> 
<canvas id="drop1" class="drop" style=" background: url(pdf_images/pdf-save-0.png); background-repeat:no-repeat;"> 
</canvas> 
</div> 

<input type="button" id="savepngbtn" value="Save Slide"> 

キャンバスを保存：

document.getElementById("savepngbtn").onclick = function() { 
     saveCanvas(oCanvas, "PNG"); 
    } 

function saveCanvas(pCanvas, strType) { 
     var bRes = false; 
     if (strType == "PNG") 
      bRes = Canvas2Image.saveAsPNG(oCanvas); 
     if (!bRes) { 
      alert("Sorry, this browser is not capable of saving " + strType + " files!"); 
      return false; 
     } 
    } 

Answer 1

あなたは '背景画像' 部分を作成する必要があります。キャンバスを1つの画像として保存したい場合はキャンバスを選択します。その後、ユーザーが注釈を追加し、保存することができ

var ctx = yourcanvas.getContext('2d'); 
var img = new Image(); 
img.src = 'http://yourimage.png'; 
img.onload = function() { 
    ctx.drawImage(img, 0, 0) 
} 

：

次のような何かを試すことができます。

Answer 2

背景イメージであってはなりません。

画像を描画するには、キャンバスに付属のDrawImageを使用する必要があります。新しいイメージ要素（つまりnew Image()）を作成して、onloadイベントを設定してDrawImageというイベントをパラメータとして呼び出し、実際にロードするように.src属性を設定します）。

明らかに、これは、画像がキャンバスの仕組みに非常に重要であるため、最初に行うべきことです。 onload内にフックを追加して、画像がロードされるまでユーザーが描画を行えないようにすることができます。