常にキャンバスの上に透明な画像があります。ここで

Question

透明画像の後ろに引く私のjsfiddleさ：描画/キャンバスの上にあることを"https://s23.postimg.org/c3u19aeqz/bmap_Front.gif"：私は常に透明なイメージをしたい

1. ：2つのものを探して

   イム。レイヤフォアグラウンド(lfg)と呼ぶことができます。このイメージは決してオーバーパイントされるべきではありません。

2. 私は画像として画像を保存します。私はイメージの下に描かれた "図面"を保存したいだけです。これは、透明イメージ以外のすべてを保存することを意味します。

私は "遊んで" 試してみました：

ctx.globalCompositeOperation = "source-over"; 
ctx.globalCompositeOperation = "destination-over"; 

と

<div id="LayerTown" class="containerChild" style="position: relative;"> 
     <canvas id="canvas" style="position: absolute; left: 0; top: 0; z-index: 0;"> 
      Update your browser 
     </canvas> 
     <img src='https://s23.postimg.org/c3u19aeqz/bmap_Front.gif' style="position: absolute; left: 0; top: 0; z-index: 1;">  
    </div> 

これまでのところ、何も私を助けていません。私は非常に新しいhtml/css/js以来、あなたが私を助けたいと思えば私のフィドルを変えることを検討してください。

Answer 1

OPであなたが言ったことをやって、キャンバスの上に画像要素を追加することができます。 CSSルール "pointer-events：none"を追加することで、キャンバスをイメージ上で右クリックし、キャンバス上のものだけを保存することができます。私たちは、もはやキャンバスに画像を描きたいんよう

<div id="LayerTown" class="containerChild" style="position: relative;"> 
    <canvas id="canvas" style="position: absolute;"> 
     Update your browser 
    </canvas> 
    <img src='https://s23.postimg.org/c3u19aeqz/bmap_Front.gif' style="position: absolute; pointer-events: none;">  
</div> 

また、スクリプトから（）関数addImg2Canvasを削除する必要があります。