2016-08-11 5 views
3

私は画像付きのウェブページを持っています。イメージを右クリックすると、メニューにオプションが表示されます。 「名前を付けて画像を保存」オプションまたはそのイベントにアクセスする必要があります。そこから2つの異なる場所に保存する必要があります。これはJSPページです。私は右のオプションにアクセスする必要がありますウェブページ上のオプションをクリックしますか?

This is image of the webpage, and the right click options.

+0

オペレーティングシステムのイベントアクションをキャプチャしようとしていますか? –

+0

マウスの右ボタンをクリックすると発生する '' contextmenu'''イベントがあります。しかし、私はオプションの1つを選択する際に何らかの出来事が起こったとは思わない。 – kkaosninja

+0

OK、私はコンテキストメニューを使用することができます。私は言及している2つまたは3つの場所に、同じサイズで同じイメージを保存できますか? –

答えて

1

いいえ、あなたすることはできません直接アクセスOS権コンテキストメニューのクリックオプション/イベント、
いますが、

// Get all images 
 
var IMAGES = document.querySelectorAll("img"); 
 
// Assign to all images our contextmenu right-click-jacker 
 
[].forEach.call(IMAGES, function(IMG){ 
 
    callCustomContextmenu(IMG); 
 
}); 
 

 
function callCustomContextmenu(IMG) { 
 

 
    var ctxmenu = document.getElementById("ctxmenu"); 
 
    var download = document.getElementById("download"); 
 
    
 
    IMG.addEventListener("contextmenu", function(evt) { 
 

 
    evt.preventDefault(); // don't show OS contextmenu 
 

 
    // TODO: Show fixed Custom DIV at coordinates: evt.clientX evt.clientY 
 
    // for now this will do... 
 
    ctxmenu.style.display = "block"; 
 
    
 
    // Download image 
 
    // http://stackoverflow.com/a/21210576/383904 
 
    download.addEventListener("click", function(){ 
 
     var A = document.createElement('a'); 
 
     A.href = IMG.src; 
 
     A.download = ''; 
 
     document.body.appendChild(A); 
 
     A.click(); 
 
    }); 
 
    }); 
 

 
}
#ctxmenu{display:none;} /* TODO: make if fixed and nice */
Right click and click download<br> 
 
<img src="http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico"> 
 
<div id="ctxmenu"> 
 
    <span id="download">Download</span> 
 
</div>
JS

を使用して、いくつかのアクションをUIを模倣してトリガされることができるもの

関連する問題