taiseiueステッカー作成
https://gyazo.com/c0a1e8ab7fc58dd3c7f59e2025959566
hr.icon
2026/3/4
macbookのケースを新調したのでステッカーはっていきたい taiseiueステッカーとかつくるといろんなとこに貼れていいのではないか
ついでにQRコード機能も持たせたい
taiseiueアイコン ドット絵verを作る
https://gyazo.com/a833eb2d210eba3f50fcbc51b652ae6a
taiseiue-doted.icon かわいくていいじゃん
これを活かしたQRコードを作っていく
プリセットのHalftoneは画像がつかえるのでこれを使ってみる
https://gyazo.com/79d13804928d3f4bedf8cf67c8b7aea1
輝度調整してこれ
taiseiue-doted.iconまぁ..まぁ
そもそも白黒だからよくないのでは
読みとり精度のこと考えると白黒が輝度比最大だからいいのはわかるけど
ということでHalftoneのコードをいじって色もいい感じに残るスクリプトを書く
code:script.js
export const paramsSchema = {
Image: {
type: "file",
},
"Image scale": {
type: "number",
min: 0,
max: 1,
step: 0.01,
default: 1,
},
Contrast: {
type: "number",
min: 0,
max: 10,
step: 0.1,
default: 1,
},
Brightness: {
type: "number",
min: 0,
max: 5,
step: 0.1,
default: 1.8,
},
"Color depth": {
type: "number",
min: 2,
max: 8,
step: 1,
default: 4,
},
"QR background": {
type: "boolean",
},
"Alignment pattern": {
type: "boolean",
default: true,
},
"Timing pattern": {
type: "boolean",
},
Margin: {
type: "number",
min: 0,
max: 10,
default: 2,
},
Foreground: {
type: "color",
default: "#000000",
},
Background: {
type: "color",
default: "#ffffff",
},
};
function quantize(value, levels) {
const step = 255 / (levels - 1);
return Math.round(Math.round(value / step) * step);
}
export async function renderCanvas(qr, params, canvas) {
const unit = 3;
const pixel = 1;
const rowLen = qr.version * 4 + 17;
if (file == null) {
file = await fetch(
).then((res) => res.blob());
}
const image = await createImageBitmap(file);
const pixelWidth = rowLen + 2 * margin;
const canvasSize = pixelWidth * unit;
const ctx = canvas.getContext("2d");
ctx.canvas.width = canvasSize;
ctx.canvas.height = canvasSize;
ctx.fillStyle = bg;
ctx.fillRect(0, 0, canvasSize, canvasSize);
ctx.fillStyle = fg;
for (let y = 0; y < rowLen; y++) {
for (let x = 0; x < rowLen; x++) {
if (module & Module.ON) {
const px = x + margin;
const py = y + margin;
ctx.fillRect(px * unit, py * unit, unit, unit);
}
}
}
}
ctx.filter = brightness(${params["Brightness"]}) contrast(${params["Contrast"]});
const imgSize = Math.floor(imgScale * canvasSize);
const imgOffset = Math.floor((canvasSize - imgSize) / 2);
ctx.drawImage(image, imgOffset, imgOffset, imgSize, imgSize);
ctx.filter = "none";
const imageData = ctx.getImageData(0, 0, canvasSize, canvasSize);
const data = imageData.data;
// Floyd-Steinberg dithering per channel (full color)
for (let y = imgOffset; y < imgOffset + imgSize; y++) {
for (let x = imgOffset; x < imgOffset + imgSize; x++) {
const i = (y * canvasSize + x) * 4;
if (datai + 3 === 0) continue; const newR = quantize(oldR, colorDepth);
const newG = quantize(oldG, colorDepth);
const newB = quantize(oldB, colorDepth);
ctx.fillStyle = rgb(${newR},${newG},${newB});
ctx.fillRect(x * pixel, y * pixel, pixel, pixel);
const errR = oldR - newR;
const errG = oldG - newG;
const errB = oldB - newB;
const distribute = (offset, factor) => {
};
if (x < canvasSize - 1) distribute(4, 7);
if (y < canvasSize - 1) {
if (x > 0) distribute(canvasSize * 4 - 4, 3);
distribute(canvasSize * 4, 5);
if (x < canvasSize - 1) distribute(canvasSize * 4 + 4, 1);
}
}
}
const dataOffset = (unit - pixel) / 2;
for (let y = 0; y < rowLen; y++) {
for (let x = 0; x < rowLen; x++) {
if (module & Module.ON) {
ctx.fillStyle = fg;
} else {
ctx.fillStyle = bg;
}
const px = x + margin;
const py = y + margin;
if (
module & Module.FINDER ||
(alignment && module & Module.ALIGNMENT) ||
(timing && module & Module.TIMING)
) {
ctx.fillRect(px * unit, py * unit, unit, unit);
} else {
ctx.fillRect(
px * unit + dataOffset,
py * unit + dataOffset,
pixel,
pixel
);
}
}
}
}
結果
https://gyazo.com/0c8871f4ffb74299bb21437dba778b41
taiseiue-doted.iconいいんじゃね
念のため誤り訂正能力を最大にしておく
できるだけ情報量を減らしていきたい
こうすると大文字小文字の区別が無くなって情報量が抑えられる
追跡とかもできるようにしておく
/Sに行くようにしてそこからutm_sourceつけたりガチャガチャする
完成
https://gyazo.com/c0a1e8ab7fc58dd3c7f59e2025959566
iPhoneだと読める!
Androidは知らない
発注
半額クーポンがあったので贅沢オプションつけた
シール・ステッカー・ラベル / おまかせ仕上げ / 50x50mm / 屋内用合成紙(耐水) / マットラミネート(PP) / 普通のり / カットパス作成: 正方形・長方形 / 片面カラー
マットラミネートにしておかないとQRコード読みとり時に反射して見えにくくなる
屋内用合成紙(耐水)は末長くmacに貼っておきたいので
5cm四方だけど読みとれるかな..だけが心配
これ以上デカいと取りまわしに苦労しそうなので
届くのをまつ
![https://upload.wikimedia.org/wikipedia/commons/1/14/The_Widow_%28Boston_Public_Library%29_%28cropped%29.jpg"](https://upload.wikimedia.org/wikipedia/commons/1/14/The_Widow_%28Boston_Public_Library%29_%28cropped%29.jpg"){kind=link}