カラーコードを入力したら48×48の正方形で画像出力してくれるやつ

https://gyazo.com/4f87eedc9ae7a5048505d3b810e7f2a7

出力例↓

https://gyazo.com/4c3f6fe5c13dcc5cad33d2f2fac2a302

ソース

code:script.js

function saveImage(R, G, B, A=255, width=48, height=48) {

let canvas = document.createElement("canvas")

let context = canvas.getContext("2d")

// 色指定

}

context.putImageData(image,0,0)

// ダウンロード処理

let a = document.createElement("a")

a.href = canvas.toDataURL()

a.click()

}

function getColorFromText(text) {

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);

}

})

スクリプトが長いって？

JavaScript詳しくないから勘弁して…

これ作るときにどこのサイト見たかは書いてある

個人的な好みだとSVGだけど

https://gyazo.com/30f43a2b07a2f0788548c0fad6b0ee56

code:js

await import("/api/code/villagepump/カラーコードを入力したら48×48の正方形で画像出力してくれるやつ/script2.js");

code:script2.js

import { 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 { permalink_url } = await uploadGyazoOAuth(blob, {

title,

// 先頭の#を抜く

});

})();

return "";

}

});

Gyazoへuploadする

code: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;

}

code:gyazo.js

export 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(

{

method: "POST",

mode: "cors",

credentials: "omit",

body: formData,

},

);

return await res.json();

}

code:gyazo.d.ts

/** Access Tokenを取得する */

function getOAuthToken(): Promise<string>;

code:gyazo.js

async function getOAuthToken() {

const res = await fetch("/api/login/gyazo/oauth-upload/token");

if (!res.ok) {

}

const token = (await res.json()).token;

if (!token) {

throw TypeError("Gyazo OAuth access token is not found.");

}

return token;

}

画像作成

code: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;

}

code:draw.js

export 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

全てのCSS colorを指定できるようにしたいな

カラーコード変換

code:color.d.ts

/** カラーコードに整形する

*

* @param text カラーコード

*/

export function getColorCode(text: string): string | undefined;

code:color.js

export function getColorCode(text) {

if (!colorCode) return;

}

code:color.d.ts

/** カラーコードか判定する

*

* @param text カラーコードかもしれない文字列

*/

export function isColorCode(text: string): boolean;

code:color.js

export function isColorCode(text) {

return colorCodeRegExp.test(text);

}

Scrapboxに書き込む

code:edit.d.ts

/** 現在位置に文字列を書き込む

*

* @param text 書き込みたい文字列

*/

export function insertText(text: string): Promise<void>;

code:edit.js

export 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));

}