データ検索ツールの一部として、私はPNGまたはSVGイメージをキャンバスに様々に描画しています。その部分はうまく動作し、かつてキャンバスに描画されたイメージはもはやベクトル形式ではないことを理解しています。しかし、私は、キャンバスを右クリックし、標準のsave-asコンテキストメニューを使用して、元のPNGまたはSVGイメージをダウンロードして保存できるようにしたいと思います。 save-asの右クリックメニューオプションのデフォルト動作を上書きする方法はありますか?HTMLキャンバスでの動作としてのオーバーライドの書き換え
答えて
保存-として 右クリックメニューオプションのデフォルトの動作をオーバーライドする方法はありますか?
これは幸いなんとかません(UN)である(私は特に 保存-としてオプション全体ではなく、コンテキストメニューを無効にに期待していました)。右クリックが例えばcontextmenu
ハンドラによって捕捉されない限り、ブラウザはの内部で生成されたメニューに読み書きアクセス権がありません。
contextmenu
イベントを使用していつでもメニューをエミュレートできますが、内部で生成されたコンテキストメニューから実際のコンテンツを読み取ることができないため、同じように見えるようにすることはできません(たとえば、バージョンの変更など)。それはもちろん、あなたが完全にメニューを置き換えることができないと言っているわけではありません。
可能であれば、キャンバスのではなく、DOM にイメージとして直接SVGを挿入することをお勧めします。この方法で、ブラウザで正しいコンテキストメニューが表示されます(オーディオとビデオなども同じです)。必要に応じて、元の画像を保存するためのコーナーなどのボタン/アイコン/リンクを入力します。
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>
- 1. URL書き換えの動作
- 2. HTML URLパス書き換え
- 3. シンプルのURLの書き換え動作しますが、IIS 10
- 4. Embedded Jettyの書き換えが正しく動作しない
- 5. IIS6での動的URL書き換え
- 6. .htaccessでの自動URL書き換え
- 7. jqueryが動作しないhtmlのキャンバス
- 8. .htaccessと簡単な書き換えが動作しない
- 9. Webサーバーhttpd.confファイルの書き換えが動作しません。
- 10. joomlaの書き換えルール.htaccessが動作しない
- 11. WordPressの.htaccess書き換えが動作しない
- 12. URLを書き換えてparamが動作しない
- 13. 異なるドメインとサブドメインで動作する書き換えルール
- 14. 書き換えルールがスラッシュなしで動作しない
- 15. 動的URLの動的URLの書き換えとリダイレクト
- 16. URL書き換えがglobal.aspxファイル内で動作しない
- 17. フォルダURLでASP.NET URL書き換えが動作しない
- 18. 動的URLのNGINX書き換えルール
- 19. 動的WebサイトのURL書き換え
- 20. NGINXサイト移動の書き換え
- 21. .htmlへの.phpのリダイレクト、.htaccessの.htmlへの.htmlへの内部書き換え
- 22. グレイルのURL書き換え(ルールの書き換え)
- 23. 書き換え<html>内容
- 24. タイトルとIDでURLの動的書き換え
- 25. Zend Framework:奇妙なURLの書き換え動作
- 26. ANTLR書き換えルールを作成してメソッドの値に書き換える方法は?
- 27. apache2とlaravelで動作しないURLを書き換えます。
- 28. html 5キャンバスが動作しない
- 29. HTMLキャンバスが動作しません
- 30. 角度ルーティングIIS - 書き換えは浅いパスでのみ動作します
$( '。キャンバス')。( 'contextmenu'、function(e){ e.preventDefault(); }); – RRR
ありがとう、多分もっと具体的であったはずです。コンテキストメニュー全体ではなく、save-asオプションを特にオーバーライドすることを望んでいました。私のカスタム画像用のデフォルトのキャンバスpng出力を入れ替えます。 – philippjfr
@philippjfr:その場合、いいえ、それはまったく、あるいは何もありません。簡単にfirefoxを除いて – dandavis