阻止像Instagram那样下载图片

Question

Instagram是如何防止下载图片的？ http://instagram.com/p/elPBOqFWVl/embed/#

我知道图片的链接是http://distilleryimage5.ak.instagram.com/f883e09023e111e3a35d22000aaa05f7_7.jpg，可以在代码中找到，但为什么它不可选择，右键也没有弹出下载菜单。大多数网站使用透明图片来覆盖实际图片，但从代码看来，这里有一些花哨的JavaScript。

- karun chaudhary

Answer 1

如果您使用Firebug来调试该页面，您会发现它实际上不是一张图片，而是一个带有background-image属性的div，链接到该图片。一旦您实际点击CSS中指定的img链接，就可以轻松下载它。

检查该div的CSS，您会发现：

element.style {
    background-image: url(http://distilleryimage5.ak.instagram.com/f883e09023e111e3a35d22000aaa05f7_7.jpg);
}

- Lance

---

谢谢。我以为它是一张图片，因为在Firefox上你可以点击并拖动它。我猜这对DIV也适用吗？ - karun chaudhary

是的，使用HTML5，几乎可以拖放任何元素。 http://www.w3schools.com/html/html5_draganddrop.asp - Lance

如果您觉得我的回答有所帮助，请接受并/或点赞！谢谢！ - Lance

似乎现在Instagram网页上的图片是使用<img/>显示的，但仍然无法下载。 - David Dal Busco

恐怕这不再是事实。你知道现在他们是如何做的吗？ - TondaCZE

我花了一段时间来理解Instagram现在是如何做到的，它很神秘。它涉及到<img>上的新“srcset”属性，但除此之外，我真的想知道他们是如何做到的。 - John Gorenfeld