Spotifyのアルバムリンクを貼ったらクリップボードにジャケットの画像をコピーするUserScript
https://gyazo.com/0dcb1ef1a32b43634a1991fb91524504
(関連 /yuta25/Spotifyのアルバムのリンクを貼ったらクリップボードにジャケット画像がコピーされるUserScript)
ユーザーページ(yuta25.iconならyuta25に、code:script.js と書いて、以下を記述すると使えます
e.g. yuta25#611b268b3868750000ef5b74
code:example.js
import '/api/code/cd/Spotifyのアルバムリンクを貼ったらクリップボードにジャケットの画像をコピーするUserScript/script.js';
https://og-image.glitch.me というところを使ってるのだけど、しばらく(30分ぐらい?)使ってないとスリープ状態っぽくなってあったまるのに時間がかかります...
vercelに移植しました
https://og-image-dlwr.vercel.app/
/yuta25/og-image-dlwr.vercel.app
code:script.js
(() => {
document.addEventListener("paste", async (e) => {
const text = e.clipboardData.getData("text");
const url = text;
if (
url.match(/^https:\/\/open\.spotify\.com\/(intl-ja\/)?(album|track)\/.+/) ||
url.match(/^https:\/\/open.spotify.com\/playlist\/.+/)
) {
const img = new Image;
const c = document.createElement("canvas");
const ctx = c.getContext("2d");
// refs.
// - https://stackoverflow.com/questions/42471755/convert-image-into-blob-using-javascript
// - https://stackoverflow.com/questions/33175909/copy-image-to-clipboard
img.onload = function() {
c.width = this.naturalWidth;
c.height = this.naturalHeight;
ctx.drawImage(this, 0, 0);
c.toBlob(async function(blob) {
const data = [new ClipboardItem({ blob.type: blob })];
await navigator.clipboard.write(data);
confirm('album jacket coppied!');
}, "image/png", 0.75);
};
img.crossOrigin = "anonymous";
img.src = https://og-image-dlwr.vercel.app/image.jpg?url=${encodeURIComponent(url)};
}
});
})();