HTMLキャンバスでの動作としてのオーバーライドの書き換え

Question

データ検索ツールの一部として、私はPNGまたはSVGイメージをキャンバスに様々に描画しています。その部分はうまく動作し、かつてキャンバスに描画されたイメージはもはやベクトル形式ではないことを理解しています。しかし、私は、キャンバスを右クリックし、標準のsave-asコンテキストメニューを使用して、元のPNGまたはSVGイメージをダウンロードして保存できるようにしたいと思います。 save-asの右クリックメニューオプションのデフォルト動作を上書きする方法はありますか？

Answer 1

保存-として 右クリックメニューオプションのデフォルトの動作をオーバーライドする方法はありますか？

これは幸いなんとかません（UN）である（私は特に 保存-としてオプション全体ではなく、コンテキストメニューを無効にに期待していました）。右クリックが例えばcontextmenuハンドラによって捕捉されない限り、ブラウザはの内部で生成されたメニューに読み書きアクセス権がありません。

contextmenuイベントを使用していつでもメニューをエミュレートできますが、内部で生成されたコンテキストメニューから実際のコンテンツを読み取ることができないため、同じように見えるようにすることはできません（たとえば、バージョンの変更など）。それはもちろん、あなたが完全にメニューを置き換えることができないと言っているわけではありません。

可能であれば、キャンバスのではなく、DOM にイメージとして直接SVGを挿入することをお勧めします。この方法で、ブラウザで正しいコンテキストメニューが表示されます（オーディオとビデオなども同じです）。必要に応じて、元の画像を保存するためのコーナーなどのボタン/アイコン/リンクを入力します。

Answer 2

IMOの場合、最適な解決策はまだ「保存」ボタンです。その隣に保存blattant がある場合

多くのユーザーは、画像を保存するためにコンテキストメニューを使用するわけではありません。
コンテキストメニューを使用する人にとっては、ここの大部分のように、この場所は安全な場所です。ここではブラウザと私たちだけがよく知っている機能を使って何をしているのか知っています。ある日、これらの機能の1つが一部のWebサイトによってオーバーライドされています（メニュー全体がWebサイトのように置換またはブロックされているだけでなく）。それ以外に私のコンピュータで何が変わったのですか？この安全な場所は最終的に安全ではありませんか？私は何が潜んでいるのか知っていますか？コンテキストメニューでこれを行った場合、ブラウザの閉じるボタンを信頼できますか？

---

しかし、あなたが本当にそれをしたい場合は、この問題を回避するには、キャンバスの上に「元」のファイルで透明<img>を置くことであろう。

ori.onload = function() { 
 
    var ctx = c.getContext('2d'); 
 
    // do some operation on the image 
 
    ctx.arc(125,75,75,0,2*Math.PI) 
 
    ctx.clip(); 
 
    ctx.drawImage(this, 0, 0, 250, 250); 
 
};

#cont { 
 
    position: relative; 
 
} 
 
#cont>img { 
 
    position: absolute; 
 
    opacity: 0; 
 
    width: 250px; 
 
    height: 250px; 
 
    left: 0; 
 
    top: 0; 
 
}

Right click the image to save the original svg version 
 

 
<div id="cont"> 
 
    <canvas id="c" width="250" height="250"></canvas> 
 
    <img id="ori" src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Fiore_con_petali_arancioni_SVG.svg" /> 
 
</div>