base64に変換されたimageデータをリサイズしたいです。

Question

jasnybootstrap の「Image upload widgets」をインタフェに使って
ファイル選択と同時に
base64にデータ化されたファイルをアップロード
↓
サーバー上で復号
↓
保存
させるところまでこぎつけたんですけど..アップロード前に

originalfile //これがbase64化されたオリジナルの画像データとして

クライアントサイドで画像を指定幅でリサイズしたいと考えて資料を探した所 次のページのソースコードにたどり着きました
JavaScript_で画像をリサイズする方法

		resizeImage = function(base64image, callback) {
			const MIN_SIZE = 800;
			var canvas = document.createElement('canvas');
			var ctx = canvas.getContext('2d');
			var image = new Image();
			image.crossOrigin = "Anonymous";
			image.onload = function(event){
				var dstWidth, dstHeight;
				if (this.width > this.height) {
					dstWidth = MIN_SIZE;
					dstHeight = this.height * MIN_SIZE / this.width;
				} else {
					dstHeight = MIN_SIZE;
					dstWidth = this.width * MIN_SIZE / this.height;
				}
				canvas.width = dstWidth;
				canvas.height = dstHeight;
				ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, dstWidth, dstHeight);
				callback(canvas.toDataURL());
			};
			image.src = base64image;
		};

たどり着いたものの...
どうやって「originalfile 」をこれにあてがうのか..
どうやってリサイズされた変数？を取り出すのか..(´・ω・｀)
私のポンコツ頭ではまったく理解できません！
そもそも これって関数なんですかね？

どなたか 優しく解説していただけませんでしょうか？
よろしくお願いいたします。

Answer 1

resizeImageがまんま関数として定義されていて、第1引数がbase64エンコードされた画像データ、第2引数がコールバックとなっていますので、

resizeImage(originalfile, function(resizedfile) {
  //resizedfileをアップロードする処理
});

ってな感じかと思います。

Comments

[退会済みユーザー]

ありがとうございます！
試してみますね

[退会済みユーザー]

本当にありがとうございます！
しっかりアップロードできました！

本当に助かりました...♪

Answer 2

一応 自己解決いたしました...
引数に元の画像データと出力先を指定すればよかったんですね
出力先の[img]を「callback」に指定したら
callback.attr('src',canvas.toDataURL());
で表示されました

ただ、私の使い方だと 引数の「callback」は不要で。
「canvas.toDataURL()」のみをreturnしたいので
関数の外側で呼び出すと「undefined」になってしまって..困ってます