分类
资源分享

只需一招教你解除 Instagram 桌面浏览器版“禁用右键复制图片”

如上图所示,Instagram 网页版 (特指PC/Mac客户端上外网的环境下,非移动端访问)于近日新增一些限制,右键不再能复制,保存图片;

在未解除“右键复制图片”的限制之前:如图所示在 img 图片元素上方还有一个块级元素 divdiv._aagw ,当你的鼠标想要选中上图所示的图片元素时,实际选中的是该块级元素,在绕过它之前你的鼠标是选中不了 img 图片元素的;

我们复制相应的HTML代码出来,

<div role="button" class="_aa06" tabindex="0"><div><div class="_aagu _aamh"><div class="_aagv" style="padding-bottom: 100%;"><img alt="Photo by 딥티즈, 연재 +82 ?? on February 01, 2022. May be an image of one or more people and indoor." crossorigin="anonymous" class="_aagt" src="https://instagram.fhkg4-1.fna.fbcdn.net/v/t51.2885-15/273045838_685893882425784_1591246309551198263_n.jpg?stp=dst-jpg_e35&amp;cb=9ad74b5e-88ad7ee8&amp;_nc_ht=instagram.fhkg4-1.fna.fbcdn.net&amp;_nc_cat=100&amp;_nc_ohc=qDEeVU3x8zIAX--MqZt&amp;edm=ALQROFkBAAAA&amp;ccb=7-5&amp;ig_cache_key=Mjc2Mzk1MjAyNTg2OTIwODE5MA%3D%3D.2-ccb7-5&amp;oh=00_AT_RqegPWSL98HLpdelXC3FM5HxBS_brmXl7kdjuh0a81Q&amp;oe=62BF674E&amp;_nc_sid=30a2ef" style="object-fit: cover;"></div><div class="_aagw"></div></div></div></div>

通过 Visual studio code 整理后,对应HTML代码:

<div role="button" class="_aa06" tabindex="0">
    <div>
        <div class="_aagu _aamh">
            <div class="_aagv" style="padding-bottom: 100%;"><img
                    alt="Photo by 딥티즈, 연재 +82 ?? on February 01, 2022. May be an image of one or more people and indoor."
                    crossorigin="anonymous" class="_aagt"
                    src="https://instagram.fhkg4-1.fna.fbcdn.net/v/t51.2885-15/273045838_685893882425784_1591246309551198263_n.jpg?stp=dst-jpg_e35&amp;cb=9ad74b5e-88ad7ee8&amp;_nc_ht=instagram.fhkg4-1.fna.fbcdn.net&amp;_nc_cat=100&amp;_nc_ohc=qDEeVU3x8zIAX--MqZt&amp;edm=ALQROFkBAAAA&amp;ccb=7-5&amp;ig_cache_key=Mjc2Mzk1MjAyNTg2OTIwODE5MA%3D%3D.2-ccb7-5&amp;oh=00_AT_RqegPWSL98HLpdelXC3FM5HxBS_brmXl7kdjuh0a81Q&amp;oe=62BF674E&amp;_nc_sid=30a2ef"
                    style="object-fit: cover;"></div>
            <div class="_aagw"></div>
        </div>
    </div>
</div>

._aagw 对应样式:

._a3gq ._aagw {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

div._aagw 的 position: absolute; 将 absolute 改为 relative 亦可解除“右键复制图片”的限制,absolute 亦是使得 div._aagw 位于 img 元素上方的原因。

CSS position属性用于指定一个元素在文档中的定位方式。top,right,bottom 和 left 属性则决定了该元素的最终位置。所以,我们决定将该 块级元素 div 进行隐藏或使用 !important 例外原则进行样式优先级覆盖,使用新的样式覆盖旧的样式,将 position 的属性从 absolute 改为 relative

<div class="_aagw">

CSS 样式实现:

div._aagw {display:none !important}

div._aagw {position:relative !important}

现在,我们通过油猴脚本将该 CSS 插入到 Instagram document 的 head 标签元素内;

油猴脚本

点击安装 ublock instagram copy 油猴脚本,其代码如下所示;

 ==UserScript==
// @name         ublock instagram
// @namespace    https://greasyfork.org/zh-CN/scripts/443290-adblock4limbo-adsremoveproject
// @version      0.0.1
// @license      CC BY-NC-SA 4.0
// @description  解除 Instagram 桌面浏览器版“禁用右键复制图片”
// @author       limbopro
// @match        https://www.instagram.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=limbopro.com
// @run-at       document-end
// @grant        none
// ==/UserScript==

// 一些常量
const imax = {
    css: {
        instagram: "div._aagw {display:none !important}"
        //instagram: "div._aagw {position:relative !important}"
    }
}

css_adsRemove(imax.css.instagram);

// 动态创建引用内部资源 内嵌式样式 内嵌式脚本
function css_adsRemove(newstyle, delaytime, id) {
    setTimeout(() => {
        var creatcss = document.createElement("style");
        creatcss.id = id;
        creatcss.innerHTML = newstyle;
        document.getElementsByTagName('head')[0].appendChild(creatcss)
    }, delaytime);
}

 后话

学习一门语言,英语也好,JavaScript 也好,Java 也好,都可以帮助我们更好地理解该语言所构造的世界;至今博主仍然是 JavaScript / PHP 等语言的门外汉,但这并不妨碍我去了解它们,以便在我需要的时候能轻易上手;正所谓,工欲善其事必先利其器,保持好奇心,从基础学起。

好了,以上就是解除 Instagram 桌面浏览器版“禁用右键复制图片”的方法,其实很简单,直接在你的浏览器安装油猴脚本里面的ublock instagram copy 插件,这样在看到ins图片想下载的时候,直接鼠标右键复制出来即可。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

退出移动版