カラーコードを入力したら48×48の正方形で画像出力してくれるやつ
作った
「色画像作成」ボタンを追加するUserScript。
# がなくても6桁の16進数であれば認識する。出力例↓
ソース
script.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]);
}
})スクリプトが長いって？
JavaScript詳しくないから勘弁して…
天才
やったぜ( ◜ᴗ◝)و
あんまり内容変わらないけど、自分のプロジェクトにもページ作った
これ作るときにどこのサイト見たかは書いてある
ラスタイメージなら確かにこういう方法もありか
個人的な好みだとSVGだけど
自分も作ってみた
#RRGGBB か RRGGBB を選択して実行すると、Gyazoにuploadした画像で置き換える事前にGyazo OAuth Uploadを設定している事が前提
jsawait import("/api/code/villagepump/カラーコードを入力したら48×48の正方形で画像出力してくれるやつ/script2.js");script2.jsimport { getColorCode, isColorCode } from "./color.js";
import { makeColorImage } from "./draw.js";
import { uploadGyazoOAuth } from "./gyazo.js";
import { insertText } from "./edit.js";
scrapbox.PopupMenu.addButton({
title: (text) => isColorCode(text) ? "色画像作成" : "",
onClick: (text) => {
const color = getColorCode(text);
if (!color) return;
(async () => {
const blob = await makeColorImage(color);
const title = `${color}の48x48正方形画像.png`;
const { permalink_url } = await uploadGyazoOAuth(blob, {
title,
// 先頭の#を抜く
description: `${title.slice(1)}\nRef:原色大辞典 https://www.colordic.org/colorscheme/${color.slice(1)}`,
});
await insertText(`[${permalink_url}]`);
})();
return "";
}
});自動的にGyazoるとラクかも? 
やってみます
Gyazoへuploadする
gyazo.d.ts/** Gyazoへ画像をuploadする
*
* @param image uploadする画像データ
* @param options options
*/
export function uploadGyazoOAuth(image: Blob, options?: GyazoOption): Promise<GyazoResult>;
export interface GyazoOption {
title?: string;
description?: string;
created?: number;
}
export interface GyazoResult {
image_id: string;
permalink_url: string;
thumb_url: string;
url: string;
type: string;
}
gyazo.jsexport async function uploadGyazoOAuth(image, options) {
const token = await getOAuthToken();
const {
title,
description,
created = Math.round(new Date().getTime() / 1000),
} = options ?? {};
const formData = new FormData();
formData.append("imagedata", image);
formData.append("access_token", token);
formData.append('referer_url', location.href);
if (title) formData.append('title', title);
if (description) formData.append('desc', description);
formData.append('created_at', created);
const res = await fetch(
"https://upload.gyazo.com/api/upload",
{
method: "POST",
mode: "cors",
credentials: "omit",
body: formData,
},
);
return await res.json();
}
gyazo.d.ts/** Access Tokenを取得する */
function getOAuthToken(): Promise<string>;gyazo.jsasync function getOAuthToken() {
const res = await fetch("/api/login/gyazo/oauth-upload/token");
if (!res.ok) {
throw Error(`${res.status} ${res.statusText}`);
}
const token = (await res.json()).token;
if (!token) {
throw TypeError("Gyazo OAuth access token is not found.");
}
return token;
}画像作成
draw.d.ts/** カラーコードから画像を作る
*
* @param color - カラーコード CSS colorなら何でもいい
* @param init - 画像の大きさとか
*/
export function makeColorImage(
color: string;
init?: ImageInit,
): Promise<Blob>;
export interface ImageInit {
width?: number;
height?: number;
}draw.jsexport async function makeColorImage(color, init) {
const { width = 48, height = 48 } = init ?? {};
// 描画エリアを作成
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const context = canvas.getContext("2d");
// 単色で塗りつぶす
context.fillStyle = color;
context.fillRect(0, 0, canvas.width, canvas.height);
return await new Promise((resolve) => canvas.toBlob(resolve));
}
References
これで色を指定しているので、
#RRGGBB だけに入力を限定する必要がない全てのCSS colorを指定できるようにしたいな
カラーコード変換
color.d.ts/** カラーコードに整形する
*
* @param text カラーコード
*/
export function getColorCode(text: string): string | undefined;
color.jsconst colorCodeRegExp = /^\s*#?([0-9a-fA-F]{6})\s*$/;
export function getColorCode(text) {
const colorCode = text.match(colorCodeRegExp)?.[1];
if (!colorCode) return;
return `#${colorCode}`;
}
color.d.ts/** カラーコードか判定する
*
* @param text カラーコードかもしれない文字列
*/
export function isColorCode(text: string): boolean;color.jsexport function isColorCode(text) {
return colorCodeRegExp.test(text);
}
Scrapboxに書き込む
edit.d.ts/** 現在位置に文字列を書き込む
*
* @param text 書き込みたい文字列
*/
export function insertText(text: string): Promise<void>;edit.jsexport async function insertText(text) {
const textInput = document.getElementById("text-input");
textInput.focus();
textInput.value = text;
const uiEvent = document.createEvent('UIEvent');
uiEvent.initEvent('input', true, false);
textInput.dispatchEvent(uiEvent);
// 少し待つ
await new Promise((resolve) => setTimeout(resolve, 100));
}めっちゃプログラミング得意な人だ・・・！