テキスト内のカラーコードから画像を生成するUserScript
入力：#1f1e33
出力↓
概要
「色画像作成」ボタンを追加するUserScript。
選択したカラーコードから48x48ピクセルの画像を生成する。
作ったきっかけ
>このプロジェクトに必要なのはカラーコードを入力したら48×48の正方形で画像出力してくれるやつ
このプロジェクト：/color
ソース
genPlainImageByColorCode.jsfunction saveImage(R, G, B, A=255, width=48, height=48) {
const size = [width,height]
const color = [R,G,B,A] // [赤,緑,青,不透明度]
let canvas = document.createElement("canvas")
canvas.width = size[0]
canvas.height = size[1]
let context = canvas.getContext("2d")
let image = context.getImageData(0,0,size[0],size[1])
for(let i = 0; i < size[0]*size[1]; i++) {
// 色指定
image.data[i*4 + 0] = color[0] // 赤
image.data[i*4 + 1] = color[1] // 緑
image.data[i*4 + 2] = color[2] // 青
image.data[i*4 + 3] = color[3] // 不透明度（アルファ）
}
context.putImageData(image,0,0)
// ダウンロード処理
let a = document.createElement("a")
a.href = canvas.toDataURL()
a.download = `color_${R.toString(16).toUpperCase()}${G.toString(16).toUpperCase()}${B.toString(16).toUpperCase()}.png`
a.click()
}
function getColorFromText(text) {
// 文字列"RRGGBB" -> カラコ配列[R,G,B]
let colorCode = text.match(/[0-9a-fA-F]{6}/)
if (colorCode === null) return;
colorCode = colorCode.toString()
let color = [parseInt(colorCode.substr(0,2), 16),
parseInt(colorCode.substr(2,2), 16),
parseInt(colorCode.substr(4,2), 16)]
return color
}
scrapbox.PopupMenu.addButton({
title: '色画像作成',
onClick: text => {
let color = getColorFromText(text);
if (typeof color !== "undefined") saveImage(color[0],color[1],color[2]);
}
})参考（にしたサイト）