base64で文字列化された画像のリサイズ用ツール

htmlではbase64により画像を文字列に変換することで
一々画像をアップロードしなくても直接ページに埋め込む事ができます
ただ、表示サイズよりも大きな画像のままbase64化してしまうと、無駄に文字列も長くなってしまいます

このページではbase64の画像を指定サイズにリサイズ(拡大、縮小)します

使い方
・まだ画像がbase64化されていなければ画像ファイルの選択かドロップ
・既にbase64かされていれば上部のテキストエリアに文字列を入力
・Width(幅)とHeight(高さ)を入力
・Resizeボタンを押すと下部のテキストエリアにリサイズされた文字列と確認用に画像が表示されます

ここにドロップでも可能

インターネット上の画像の場合
画像自体(https://~.png)を開き、右クリックしてFirefoxなら「要素を調査」をChromeなら「検証」を選択
そこからコンソールで下のフレーム内の文字列を実行すれば結果が出力される

var img = document.querySelector('img');var canvas = document.createElement('canvas');canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContext('2d');ctx.drawImage(img,0,0);canvas.toDataURL();

このページでの直接取得やブックマークレットはCrossOriginで無理です
Origin

Width
Height


Resized