Javascript-如何從右鍵單擊獲取圖像網址

Question

我正在編寫一個允許用戶在線處理圖像的應用程序。 到目前為止，一切正常，但是在某些站點上-它們未使用img標簽。 因此，我需要右鍵單擊時獲取圖像URL的替代方法。

在FHM.COM中，它們具有以下功能：

<div class="efImage" style="background-image: url('https://igcdn-photos-f-a.akamaihd.net/hphotos-ak-xpa1/t51.2885-15/e15/924583_1497100237194525_212104957_n.jpg');">        
</div>

右鍵單擊后，如何獲取該圖片的網址？

Answer 1

這個怎么樣：-

$('*').mousedown(function(event) {
    if(event.which == 3) { //detect right click
        var background = $(this).css('background-image'); //get background image
        if(/url\(([^\)]+)\)/.test(background)){ // check background image exists
            var url = /url\(([^\)]+)\)/.exec(background)[1]; // get the url
            alert(url);     
        }
    }
});

小提琴

Answer 2

您需要從backgroundImage解析字符串，可以在兩種情況下將元素傳遞給此方法以獲取圖像的url：

 function getUrlFromElement(element){
    if(element.tagName.toLowerCase() === "img"){//check if it's an img
        return element.src; //it's an image, return src attribute
    }
    else{
        if(element.style.backgroundImage){//it's not an image, check if it has background Image
            return element.style.backgroundImage.slice(4,-1); //imageUrl starts at position 4 "url(" ends in length -1 to avoid closing ")"
        }
    }
}

Answer 3

• 檢查mousedown事件是否有鼠標單擊。
• 將event.button切換為case 2的鼠標右鍵。
• 檢查元素的style.backgroundImage屬性
• 替換url()
• 使用虛擬輸入元素復制並選擇樣式

類似於以下內容：

$('.efImage').on('mousedown', function (ev) {
    var dummy = $('#copytext'),
        style;

    switch (ev.button) {
        case 2:
            style = this.style.backgroundImage.replace('url(', '').replace(')', '');
            break;
    }

    if (style) {
        dummy.val(style).select();

        // selection to clipboard
        try {
            document.execCommand('copy');
        } catch (err) {
            $('textarea').val(dummy.val());
        }
    }
});

演示

Answer 4

使用getElementsByClass

var imgSrc = document.getElementsByClass("efImage").src;