Javascript-如何通过右键单击获取图像Url

Javascript-如何通过右键单击获取图像Url,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在写一个允许用户在线处理图像的应用程序。到目前为止,一切正常,但在一些网站上,他们没有使用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

我正在写一个允许用户在线处理图像的应用程序。到目前为止,一切正常,但在一些网站上,他们没有使用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>

右键单击时如何获取该图像的url?

使用getElementsByClass

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

您需要解析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 ")"
        }
    }
}
这个怎么样:-

$('*').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);     
        }
    }
});

  • 检查鼠标单击的
    mousedown
    事件
  • 将鼠标右键的
    事件按钮切换到
    案例2
  • 检查元素的
    样式.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());
        }
    }
});

右键单击是什么意思?您是在问如何在通过右键单击启动的开发人员工具中查看此图像样式吗?@jfriend00这会让您感到困惑吗?所以我需要其他方法来获取右键单击时的图像url。当我被否决时,没有提到开发工具真的让我很生气,因为有人决定“编辑”我的问题!你没有因为编辑而被否决。你被否决了,因为你的问题对一些人来说并不完全清楚,你没有回应要求澄清的评论。如果你不发布一个问题,然后消失到第二天,StackOverflow的效果会好得多。得到答案可能需要几天时间——我们中的一些人有工作要做,这要求我们不要坐着看。除了你,这个问题大家都很清楚!所以这是一个令人遗憾的否决投票的理由。但这没关系-我会将你的否决票标记为不合理。这不会解决OP问题中的元素类型。仅供参考,在IE中,右键单击上下文菜单会出现在该警报对话框上方。