JavaScript で File オブジェクトの画像のサイズを取得する方法
JavaScript で File オブジェクトとして保持された画像ファイルのサイズ（幅・高さ）を取得する方法についてです。 Node ではなくクライアントサイドの JavaScript でのお話です。 早速結論ですが、 Image オブジェクトを生成して src にそのファイルの中身をセットし、 onload コールバックが呼ばれたときにサイズを取得すれば OK です。 const img = new Image(); img.onload = () => { // ここでサイズが取得できる const size = { width: img.naturalWidth, height: img.naturalHeight, }; URL.revokeObjectURL(img.src); console.log(size); }; img.src = URL.createObjectUR
[HTML5] Canvasを画像に変換しサーバへ送信する - ねこの足跡R
Canvasに描画した内容を画像としてサーバへ送信し、そのままサーバに保存してみます。 今回は入力したテキストがそのままCanvasに描画される簡単なサンプルを用意しました。文字色と背景色もおまけで変更できます。もう少し頑張るとバナー画像ジェネレーターとか作れそうですね。 サーバ側のプログラムはPHPを採用していますが、他の言語でも似たような処理になります。 Canvasの内容をサーバへ送信する 実行例 ソース HTML JavaScript PHP 解説 Canvasを画像として取り出す サーバへ送信する サーバでバイナリとして保存する 参考ページ Canvasの内容をサーバへ送信する 実行例 以下から実際のサンプルをお試しいただけます。 miku3.net 左側にあるテキストボックスへ入力するとその場でCanvasに反映されます。同様に文字色や背景色も指定したタイミングでCanvasが
![[HTML5] Canvasを画像に変換しサーバへ送信する - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd4ec00f9e7dc008c0692333e4281a83ea17d3a6/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkatsube%2F20231125%2F20231125045644.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MURAL
