轉載自
https://ithelp.ithome.com.tw/articles/10338052
前情提要
有時候我們需要使用一些圖片，勢必需要圖片的網址，這時候， 也許你可以本機上傳，然後去把網址抓好， 又或者你可以找到網路上別人的圖片，右鍵開啟新分頁，再複製網址； 又或者直接打開檢查(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;
}
}
// 創建一個函數，用於添加點擊事件處理程序並處理圖像的src
function 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);
心得
這次的小腳本功能非常簡單，寫起來邏輯也是很清晰透明，沒有什麼彎曲。 雖然簡單，但是寫起來功能非常實用！ 這就是針對懶人專用的！ 其實沒有人規定前端這種東西要寫得多大，多了不起/ᐠ｡ꞈ｡ᐟ\ 好像你很屌、很懂前端、框架，那個是一回事，能夠完成自己的需求也很美好。
很久沒更新了，這次的酷酷小腳本應該很爽⁽⁽٩(๑˃̶͈̀ ᗨ ˂̶͈́)۶⁾⁾ 好好的來玩前端吧，未來還有更大的宇宙！
按讚的人：
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章
