テキスト内のカラーコードから画像を生成するUserScript
https://gyazo.com/4f87eedc9ae7a5048505d3b810e7f2a7
入力：#1f1e33
出力↓
https://gyazo.com/4c3f6fe5c13dcc5cad33d2f2fac2a302
概要
選択したカラーコードから48x48ピクセルの画像を生成する。
作ったきっかけ
このプロジェクトに必要なのはカラーコードを入力したら48×48の正方形で画像出力してくれるやつ
ソース
code:genPlainImageByColorCode.js
function saveImage(R, G, B, A=255, width=48, height=48) {
let canvas = document.createElement("canvas")
let context = canvas.getContext("2d")
let image = context.getImageData(0,0,size0,size1) for(let i = 0; i < size0*size1; i++) { // 色指定
image.datai*4 + 3 = color3 // 不透明度（アルファ） }
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 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(color0,color1,color2); }
})
参考（にしたサイト）