画像のリサイズをJavaScriptで行う
画像をバックエンドに送る前にリサイズしたい時があると思います。 サーバー側でリサイズ処理を行うのは、それだけでもアップロード時のネットワークの負荷などもあって あまりよろしくないことがあります。 なので、フロント側、つまりJavaScriptでリサイズしましょうという考え。 流れ 画像読み込む canvasを作成 好きな大きさを指定 画像をcanvasに貼り付ける(位置や、canvas内の画像の大きさなども指定する) DataURL(文字列化)にする このような流れになりますが、流れを見るより処理を見た方が分かりやすいかと思います。 リサイズ処理 画像読み込み 画像の読み込みを行います。 const inputElement = document.getElementById("input"); inputElement.addEventListener("change", roadImg
ウィンドウリサイズ完了時に一度だけ関数を実行する｜もっこりJavaScript｜ANALOGIC（アナロジック）
ウィンドウをリサイズさせた時に何か処理をしたい事はよくありますよね。そういった場合、次の例の様に単純にwindow.onresizeイベントに処理したい関数を割り当てればとりあえずはリサイズ時に関数を実行させることは出来ます。 window.onresize = function () { console.log('hoge'); }; しかし、この場合リサイズしている間(=ウィンドウを動かしている間）何度も関数がコールされます。 それ自体は悪いことではないのですが、リサイズが「完了」した時に一度だけ処理を実行したいようなケースもあると思います。そういった場合、何度も同じ関数がコールされてしまうのは無駄な処理です。処理の内容が重いものであればなおさらです。 例えば、ウィンドウのリサイズが完了したタイミングで発火するイベントがあれば良いのですが、現状のブラウザではそんなものはありませんので、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
