provides two buttons on each image: to copy image URL and to copy image itself in the clipboard
目前為
// ==UserScript==
// @name copy images in one click istock
// @namespace http://tampermonkey.net/
// @version 2024-05-26
// @description provides two buttons on each image: to copy image URL and to copy image itself in the clipboard
// @author GreatFireDragon
// @match https://www.istockphoto.com/ru/search/2/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=istockphoto.com
// @license MIT
// @grant GM_addStyle
// ==/UserScript==
!function(){const e="clicked",t="emoji-div",n="emoji_copied",o="😀",i="😍",a=[];function c(){const e=localStorage.getItem("clickedImages");return e?JSON.parse(e):[]}function d(e){const t=c();t.includes(e)||(t.push(e),localStorage.setItem("clickedImages",JSON.stringify(t)))}function s(c){const s=c.target;if(s&&s.classList.contains(t)){const t=s.closest("div:has(img)").querySelector("img");if(t){const r=decodeURIComponent(t.src);s.textContent===o?function(t,o,i){const c=document.createElement("input");t.ctrlKey||t.shiftKey?(a.push(i),document.body.appendChild(c),c.value=a.join(" "),c.select(),document.execCommand("copy"),document.body.removeChild(c)):(a.length=0,document.body.appendChild(c),c.value=i,c.select(),document.execCommand("copy"),document.body.removeChild(c));d(i),o.classList.add(e),o.classList.add(n),setTimeout((()=>{o.classList.remove(n)}),500)}(c,s,r):s.textContent===i&&function(t,o){const i=decodeURIComponent(o.src),a=new XMLHttpRequest;a.open("GET",i,!0),a.responseType="blob",a.onload=function(){if(200===a.status){const o=a.response,c=new FileReader;c.onloadend=function(){const o=new Image;o.src=c.result,o.onload=function(){const a=document.createElement("canvas");a.width=o.width,a.height=o.height;a.getContext("2d").drawImage(o,0,0),a.toBlob((function(o){const a=new ClipboardItem({"image/png":o});navigator.clipboard.write([a]).then((()=>{t.classList.add(n),setTimeout((()=>{t.classList.remove(n)}),500)})).catch((e=>{console.error("Failed to copy image: ",e)})),d(i),t.classList.add(e)}),"image/png")}},c.readAsDataURL(o)}},a.send()}(s,t)}}}function r(){const n=document.querySelector("div[data-testid='gallery-items-container']");if(n){n.querySelectorAll("div[data-max-width]:has(img)").forEach((function(e){if(!e.querySelector(`.${t}`)){const n=document.createElement("div");n.textContent=o,n.classList.add(t),n.style.cursor="pointer";const a=document.createElement("div");a.textContent=i,a.classList.add(t),a.style.cursor="pointer",e.appendChild(n),e.appendChild(a)}})),n.addEventListener("click",s)}!function(){const t=c();document.querySelectorAll("div[data-max-width]:has(img)").forEach((n=>{const o=n.querySelector("img");o&&t.includes(decodeURIComponent(o.src))&&n.classList.add(e)}))}()}function l(){localStorage.removeItem("clickedImages");document.querySelectorAll(`div.${e}`).forEach((t=>{t.classList.remove(e)}))}new MutationObserver((function(e){e.forEach((function(){r()}))})).observe(document.body,{childList:!0,subtree:!0}),r(),function(){const e=document.createElement("button");e.id="clearTakenImages",e.textContent="Clear Taken Images",e.addEventListener("click",l),document.body.insertBefore(e,document.body.firstChild)}(),GM_addStyle("\n.emoji-div {\n position: absolute;\n\ttop: 0;\n\tright: 0;\n\tbackground-color: rgba(0, 0, 0, 0.5);\n\topacity: 0.3;\n\tpadding: 5px;\n}\n\n.emoji-div:hover {opacity: 1;}\n\ndiv[data-testid='gallery-mosaic-asset-overlay'] {display: none;}\n\ndiv:has(.emoji-div) {position: relative;}\n\ndiv[data-testid='gallery-items-container'] > a,\n.affiliate-promo-code-notification-banner {\n display: none;\n}\n\n/* div[ng-non-bindable][data-component][data-prerender][data-app][data-locale][data-site][data-federated-component][data-root] */\n\n@keyframes backgroundColorChange {\n 0% {background-color: initial;}\n 50% {background-color: #01cd5d;scale: 2;}\n 100% {background-color: initial;}\n}\n.emoji_copied {animation: backgroundColorChange 0.5s ease-in-out infinite;}\n\n.emoji-div:nth-child(3) {right: 31px;}\n\n.clicked:has(.emoji-div) {\n filter: brightness(15%);\n transition: filter 0.5s;\n}\n\n.clicked:has(.emoji-div):hover {\n filter: brightness(100%);\n}\n\t")}();