前端小试身手(6)--IMG複製大师，懒人专用小脚本

目录

前端小试身手(1)--帮「发问/发文页」新增"编辑"钮～

前端小试身手(2)--it帮跳转到最佳解答

前端小试身手(3)--增添系列文目录

前端小试身手(4)--it帮发文「一眼全览」

前端小试身手(5)-备份it帮的发问！

前端小试身手(6)--IMG複製大师，懒人专用小脚本

前端小试身手(7)--迷片静音神队友，让你尴尬不再有！

前端小试身手(8)--教你写出「思想审查警卫」，过滤垃圾杂讯的利器！

前端小试身手(9)--文章缩图预览(以codeLove论坛为例)

前情提要

有时候我们需要使用一些图片，势必需要图片的网址，这时候，
也许你可以本机上传，然后去把网址抓好，
又或者你可以找到网路上别人的图片，右键开启新分页，再複製网址；
又或者直接打开检查(F12)找到src的网址去複製。

光听这个流程我就觉得，心累。
这时候前端大师，就会写一套简单的小脚本来完成这个白烂的工作。

脚本下载

https://greasyfork.org/zh-TW/scripts/477141-img%E8%A4%87%E8%A3%BD%E5%A4%A7%E5%B8%AB

JS程式码

// ==UserScript==// @name         IMG複製大师// @namespace    http://tampermonkey.net/// @version      0.1// @description  针对网页上图片，点击就複製其网址// @author       You// @match         *://*/*// @icon         https://www.highcharts.com/demo/highcharts/spline-plot-bands// @grant        none// ==/UserScript==let isEventActive = false; // 用于跟蹤事件的状态// 创建一个链接元素并设置其属性const toastrCssLink = document.createElement('link');toastrCssLink.rel = 'stylesheet';toastrCssLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css';// 创建一个脚本元素并设置其属性const toastrScript = document.createElement('script');toastrScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js';// 创建另一个脚本元素并设置其属性const toastrScript2 = document.createElement('script');toastrScript2.src = 'https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js';// 将链接元素和脚本元素添加到文档头部document.head.appendChild(toastrCssLink);document.head.appendChild(toastrScript);document.head.appendChild(toastrScript2);// 获取页面上的所有img元素const images = document.querySelectorAll('img');function removeClickHandler(image) {    image.removeEventListener('click', clickHandler);}function toggleEvent() {    if (isEventActive) {        // 如果事件已经激活，则关闭事件        console.log('IMG複製大师关闭ꐦ°᷄д°᷅');        // 解除事件监听        images.forEach(removeClickHandler);        isEventActive = false;    } else {        // 如果事件尚未激活，则打开事件        console.log('IMG複製大师启动ฅ^•ﻌ•^ฅ');        // 遍历所有img元素        images.forEach((image) => {            // 检查图像是否已加载            if (image.complete) {                // 图像已加载，直接添加点击事件处理程序                addClickHandler(image);            } else {                // 图像尚未加载，等待加载完成后再添加点击事件处理程序                image.addEventListener('load', () => {                    addClickHandler(image);                });            }        });        isEventActive = true;    }}document.addEventListener('keydown', (event) => {    if ((event.key === 'q' && event.ctrlKey) || event.key === 'F8') {        toggleEvent(); // 切换事件的状态    }});function transformImageUrl(url) {    // 使用正则表达式匹配URL中的目标部分    const regex = /https:\/\/cache.ptt.cc\/c\/https\/i.imgur.com\/([^?]+)/;    const match = url.match(regex);    if (match) {        // 如果匹配成功，构建新的URL        const imgurId = match[1];        return `https://i.imgur.com/${imgurId}`;    } else {        // 如果没有匹配到目标部分，返回原始URL        return url;    }}// 创建一个函数，用于添加点击事件处理程序并处理图像的srcfunction addClickHandler(image) {    image.addEventListener('click', clickHandler);}// 创建一个函数，用于处理点击事件function clickHandler() {    let src = this.src;    src = transformImageUrl(src);    const textArea = document.createElement('textarea');    textArea.value = src;    document.body.appendChild(textArea);    textArea.select();    document.execCommand('copy');    document.body.removeChild(textArea);    // 使用 toastr 进行通知    toastr.success('网址複製完成: ' + src);}

观念笔记

这个小脚本总共使用了大概三种观念，
第一种就是toast的套件使用，
第二个是监听键盘做开关，
第三个则是程式本身对于img的监听，把src複製到剪贴簿。

第一部分:套件

使用套件在于脚本，必须利用appendChild，先使用create的API製作出放置CDN的link元素，
再把它append到网页上，则可以使用其套件。

第二部分:监听键盘

这脚本启动与关闭是透过监听键盘的，ctrl+q或F8这部分就是纯粹监听。

document.addEventListener('keydown', (event) => {    if ((event.key === 'q' && event.ctrlKey) || event.key === 'F8') {        toggleEvent(); // 切换事件的状态    }});

里面写了一个toggleEvent是因为想要设定可以开开关关。

第三部分:程式本身

这边有一点小技巧是複製到剪贴簿，其实以前文章也有写过教学，是个常见实用的招数：

    const textArea = document.createElement('textarea');    textArea.value = src;    document.body.appendChild(textArea);    textArea.select();    document.execCommand('copy');

再来就是针对网页上全部的img元素，去监听点击事件、移除事件这两个。

const images = document.querySelectorAll('img');function addClickHandler(image) {    image.addEventListener('click', clickHandler);}function removeClickHandler(image) {    image.removeEventListener('click', clickHandler);}

之后这两个事件要写在toggle里面，当开启的条件就执行新增事件；关闭就执行解除绑定

开启也就是：

  images.forEach((image) => {            // 检查图像是否已加载            if (image.complete) {                // 图像已加载，直接添加点击事件处理程序                addClickHandler(image);            } else {                // 图像尚未加载，等待加载完成后再添加点击事件处理程序                image.addEventListener('load', () => {                    addClickHandler(image);                });

关闭则是：
images.forEach(removeClickHandler);

心得

这次的小脚本功能非常简单，写起来逻辑也是很清晰透明，没有什么弯曲。
虽然简单，但是写起来功能非常实用！
这就是针对懒人专用的！
其实没有人规定前端这种东西要写得多大，多了不起/ᐠ｡ꞈ｡ᐟ
好像你很屌、很懂前端、框架，那个是一回事，能够完成自己的需求也很美好。

很久没更新了，这次的酷酷小脚本应该很爽⁽⁽٩(๑˃̶͈̀ ᗨ ˂̶͈́)۶⁾⁾
好好的来玩前端吧，未来还有更大的宇宙！