审查元素怎么提取图片

打开一个网页，审查看到一张喜欢的元素图，右键另存却被告知“图片已被保护”。提取图片这种时候，审查审查元素就是元素你的后门。按一下F12，提取图片或者干脆在图片上直接右键选择“检查”，审查开发者工具会立刻弹出来，元素光标精准地落在那张图片对应的提取图片代码行上。不需要任何插件，审查浏览器的元素原生功能就够了。

找图片位置有个笨办法，提取图片也有个巧办法。审查笨办法是元素在Elements面板里翻，一行行往下扫，提取图片看到标签就停下来看它的src属性。但很多网站不会把图片直接写在img标签里，它们用背景图，用懒加载，甚至用canvas画出来。这时候你得换个思路——在Network面板里刷新页面，等所有资源加载完，点一下Img过滤器，所有图片文件会按大小排列，你一眼就能认出哪个是你要的那张。这个方法几乎能应对所有情况。

src指向的地址有时候是相对路径，有时候是完整的CDN链接。不管哪种，把那个URL复制到新标签页打开，图片就能单独显示出来。如果网站做了防盗链，直接打开会报403，这时候把URL前面的域名改掉，或者用无痕模式再试一次，多半能绕过去。我遇到过最刁钻的情况是图片被切成几十块小碎片拼成马赛克，那种真没法用审查元素直接提取，得写脚本拼接，但那是极少数变态网站才会干的事。

背景图就麻烦一点，它的URL藏在CSS的background-image属性里。你得在Elements面板右侧找到Styles标签，往下滚动找到那个声明。有时候背景图用了多重叠加，background-image会列好几层URL，你得挨个试。还有一种情况是图片以Base64编码的形式直接嵌在CSS里，那种代码长得像天书，一长串字母数字混合，找到data:image/开头的那段，复制出来存成.base64文件，再找个在线工具解码就能拿到原图。

懒加载技术让很多图片在页面滚动到可视区域之前根本不会加载。你直接审查元素时看到的src可能是个占位符，真正的图片地址藏在data-src属性里。这种情况别慌，在Elements面板里选中那个img标签，右侧属性列表里找data-src或data-original，那个才是真身。或者更简单，把页面滚到底部再滚回来，让所有图片都加载完，然后重新审查元素，这时候src就变成真实地址了。

提取图片这事，本质上就是弄清楚浏览器从哪里拿到了这张图。审查元素只是工具，真正起作用的是理解网页的加载逻辑。掌握了这套逻辑，不管图片藏得再深，你都能把它揪出来。试几次就会发现，大部分网站的图片保护其实脆弱得可笑，只是大多数人懒得按一下F12而已。