ぼかし処理おためし
約1分で読めます
VRChat
これなに？
ブログにぼかし画像を載せたいことがあったので、本文画像だけぼかして、クリック時だけ元画像を見られる処理を追加しました。
通常の画像は今までどおりそのまま表示されます。
通常画像
ぼかし画像
ぼかし画像には クリックでぼかし解除 の案内を自動表示するようにしています。
"blur" とだけ書いた場合のデフォルト値は 24 です。
必要なら blur:18 のように個別指定もできます。
書き方
こんな感じで、画像タイトルに blur を付けるだけです。
処理の一部
実際には rehype で Markdown の画像を見て、ぼかし用の属性を付けています。
主要なところだけ抜粋するとこんな感じです。
const BLUR_TITLE_PATTERN = /^blur(?::(\d{1,2}))?$/i;
function parseBlurTitle(title) { const normalizedTitle = title.trim(); const match = BLUR_TITLE_PATTERN.exec(normalizedTitle); if (!match) { return null; }
const radius = Number.parseInt(match[1] ?? "24", 10); return Number.isFinite(radius) ? Math.min(Math.max(radius, 1), 24) : 24;}
export function rehypeImageBlur() { return (tree) => { visit(tree, (node) => { if (node.type !== "element" || node.tagName !== "img") { return; }
const properties = node.properties ?? {}; const blurRadius = parseBlurTitle(toPropertyString(properties.title)); if (!blurRadius) { return; }
delete properties.title; properties["data-blur-preview"] = "true"; appendStyle(properties, `--image-preview-blur-radius: ${blurRadius}px;`); node.properties = properties; }); };}見た目のぼかし自体は CSS 側でやっていて、lightbox 側にはその属性を引き継がないようにしているので、クリックで元画像が見られる感じです。
つまりどういうこと？
ちょっとXにアップロードするのが憚られるような画像でも、こちらに投稿できるようになった気がします。
たぶん大丈夫なんじゃないかなぁ・・・？と思ってる。
こんなのとかね。
これくらいなら全然大丈夫だとおもうけど！
