ReactでアニメーションGIFをコマに分けて表示する方法
ブラウザの ImageDecoder で GIF を1コマずつ取り出し、表示時間と一緒に React で並べます。差分だけが入ったコマも前のコマと重ねた1枚の画像として返ること、コマ数を読む前に completed を待つ理由も確かめ ...
ReactでWebPとJPEGに変換して、大きさと画質を比べる方法
選んだ画像を canvas の toBlob() で JPEG や WebP に書き出し、ファイルの大きさと PSNR を React で並べて比べます。書き出せない形式が PNG になる点や、透明な部分の扱いも確かめました。 ...
CSSのimage-renderingでドット絵をぼかさず拡大する方法
小さなドット絵を img で拡大すると、境目がぼけます。image-rendering: pixelated を付けると、元のドットのまま拡大されます。crisp-edges との違い、整数倍でない大きさ、背景画像や canvas で ...
Reactで、画像の色数を減らしてポスターのようにする方法
画像の R・G・B をそれぞれ数段階にそろえ、色の数を減らしたポスターのような画像を React で表示して PNG で保存しました。SVG のフィルターで表示だけを変える書き方と、color-interpolation-filter ...
Reactで、2枚の画像の違う部分を色で示す方法
2枚の画像を1画素ずつ比べ、違う画素をピンクで塗った画像を React で表示しました。差を見逃さないためのしきい値の決め方と、JPEG と比べると変えていない部分まで違う画素になることも、画素を数えて確かめています。
Reactで、画像に文字を入れて保存する方法
選んだ画像に文字を重ねて、そのまま PNG で保存する仕組みを React で作りました。canvas に文字を描く設定、縁取りの描き方、長い文の折り返し、Webフォントを読み込み終わってから描く理由を、検証環境で確かめています。
Reactで、画像からQRコードを読み取る方法
選んだ画像を canvas に描いて画素を取り出し、jsQR に渡して QR コードを読む React のコンポーネントです。背景が透明な PNG、白黒が反対の QR コード、大きな画像、Shift_JIS の文字、QR コードが2つ ...
Reactで、画像の明るさの分布をヒストグラムで表示する方法
選んだ画像の画素を canvas で読み、明るさ 0〜255 ごとの数を棒グラフにする React のコンポーネントです。明るさの計算に使う重み、透明な画素の扱い、画像を縮めてから数えたときの時間と結果の違い、縦軸を対数にする理由を、 ...
Reactで、画像に文字の透かしを入れて保存する方法
選んだ画像の全面に、斜めに並べた文字の透かしを入れて保存する仕組みを React で作りました。パターンを回して角まで埋める方法、縁取りした文字を均一に薄くする方法、JPEG で保存するときの透明な部分の扱いを、検証環境で確かめていま ...
Reactで、複数の画像を並べて1枚にまとめる方法
選んだ複数の画像を横・縦・格子に並べ、1枚の PNG にして保存する仕組みを React で作りました。手元にある何枚かの画像を、1枚のコラージュ画像にまとめて保存したい場面で使えます。大きさの違う画像のそろえ方、正方形への切り抜き、 ...
Reactで、画像の明るさとコントラストを調整して保存する方法
画像の明るさとコントラストを2本のスライダーで調整し、PNG で保存するコンポーネントを React で作りました。画面では CSS の filter、保存では canvas の ctx.filter に同じ文字列を渡します。値が 2 ...
Reactで、画像の一部にモザイクをかける方法
画像の上をドラッグした範囲にモザイクをかけて、そのまま保存できる仕組みを React で作りました。マスごとに平均の色で塗る処理、縮めて表示した canvas での座標の直し方、縮めて引き伸ばす書き方との違いも確かめています。 ...
Reactで、画像を回転・反転して保存する方法
選んだ画像を 90° ずつ回したり左右・上下に反転したりして、そのままファイルに保存する仕組みを React で作りました。向きの持ち方と canvas での描き方、回したあとに反転したときのずれ、EXIF の向きも確かめています。
Reactで、画像から代表的な色を取り出す方法
画像を小さく canvas に描き、getImageData で読んだピクセルの色を数えて、いちばん多い色を代表色にする React のコードです。平均色との違い、色をまとめる段階の数、透明な部分、別のオリジンの画像で起きるエラーも確 ...
Reactで、タブのタイトルとアイコンに未読の件数を出す方法
未読が3件あるとき、タブに「(3) 猫のメモ」と出し、ファビコンに件数を描く方法です。React 19 の title と canvas で作り、100件以上を「99+」にする場合、件数が続けて変わる場合、アイコンが別オリジンにある場 ...
ReactとPDF.jsで、PDFをページ送りしながら表示する方法
PDF.js で読み込んだ PDF を、React で1ページずつ canvas に描き、前後のボタンで送る方法です。速く送るときは前の描画を取り消し、高解像度の画面では倍の画素で描き、フォントを埋め込んでいない日本語の PDF には ...
Reactで、音声ファイルの波形を描く方法
ユーザーが選んだ音声ファイルの波形を、ライブラリを使わずに canvas へ描く方法です。Web Audio API で数値の並びにデコードし、canvas の横幅と同じ数の区間ごとに最小値と最大値を取って描きます。再生位置の表示と、 ...
Reactで、カメラの映像を表示して写真を撮る方法
getUserMedia() で得たカメラの映像を video に映し、撮影ボタンを押した瞬間の映像を canvas に描いて JPEG にする方法です。StrictMode でもカメラを止め忘れない片付けの書き方と、前面カメラの左右 ...
Reactで、アップロード前に動画のサムネイル画像を作る方法
ユーザーが選んだ動画ファイルから、ブラウザの中でサムネイル用の JPEG を作る方法です。画面に出さない video 要素で場面へ移動し、canvas に描いて toBlob で画像にします。seeked を待たずに描くと前の場面が写 ...
ReactでQRコードを作って表示する方法
入力した文字から QR コードを作り、画面に表示して PNG で保存できる React のコンポーネントを、qrcode.react で作ります。読み取れなくなる原因になりやすい余白の不足、入る文字数の上限、ロゴを重ねるときの誤り訂正 ...
Reactで、指やマウスで手書きできる署名欄を作る方法
canvas と Pointer Events で、マウスでも指でも書ける署名欄を React で作りました。線を点の配列で持って描き直す作りにし、画面の倍率、幅の変化、枠の外へのはみ出し、スクロールとの取り合い、画像への書き出しを確 ...
Reactで、画像をドラッグして切り抜く方法
画像の上で範囲をドラッグして選び、その部分を PNG に切り抜く仕組みを、ライブラリを使わずに React で作りました。手元の画像をブラウザの中でトリミングする画面に使えます。setPointerCapture と draggabl ...
Reactで、アップロード前に画像を縮小してプレビューする方法
選んだ画像をブラウザの中で縮小し、送る前にプレビューする方法を React と TypeScript で確かめました。アップロード前の画像の圧縮に使えます。canvas で JPEG にする関数、選び直したときの古い結果の捨て方、透明 ...