mw wp form で画像をリサイズした上で送信したい

Question

前提

Wordpressのプラグインであるmw wp formにて
主にスマホから画像と情報を投稿してもらい、送信内容を後ほどCSVでエクスポートして利用する予定です。画像と情報の送信フォームはmw wp formで作成し動作確認済みです。

実現したいこと

アップロードされる写真がスマホで撮影されたものがメインとなると5M以上を想定。
バリデーションルールの「サイズ制限」を行いますが、なるべくユーザーの方での操作を減らしたいのと、そもそもサーバー容量もへらしたいので、ブラウザ上で画像サイズをリサイズしたいです。

1. 画像をアップロード
2. ブラウザ上でリサイズ
3. リサイズされた画像で送信（メールに添付されている必要はなし）
4. 管理画面内の「問い合わせデータ」でもリサイズされた画像が登録されている

試したこと

以下のURLを参考に、縮小プレビュー表示はできましたが、この縮小した画像を送信するところで躓いています。
https://demo.isystk.com/jquery-imageUploader/

MW WP Form フォーム記述

<script src="index.js"></script>
<script src="jquery-imageUploader.js"></script>
<script type="text/javascript">
jQuery(function() {
	jQuery('.js-uploadImage').imageUploader({
		dropAreaSelector: '#drop-zone',
		successCallback: function(res) {
      console.log(res);
		}
	});
});
</script>
              <div id="drop-zone" style="border: 1px solid; padding: 30px">
                <p>ファイルをドラッグ＆ドロップもしくは</p>
                <input
                  type="file"
                  name="receipt"
                  multiple="multiple"
                  accept="image/*"
                  capture="environment"
                  class="js-uploadImage"
                />
                <p class="error-message"></p>
              </div>

              <div id="select-image">
                <table>
                  <tr>
                    <th>ファイル名</th>
                    <th>元の画像</th>
                    <th>リサイズ後画像</th>
                    <th>元のサイズ</th>
                    <th>リサイズ後サイズ</th>
                    <th>タイプ</th>
                  </tr>
                </table>
              </div>
[その他のmw wp formタグ]
[mwform_backButton value="戻る"][mwform_submit name="submit" value="送信する"]

出力されたhtml

<form method="post" action="" enctype="multipart/form-data">
  <script src="https://tips.dvision.jp/wp-content/themes/test/resize.js"></script>
  <input accept="image/*" name="receipt" type="file" />
  <input type="text" name="他のタグ1" />
  <input type="text" name="他のタグ2" />
  <input type="text" name="他のタグ3" />
  <input type="submit" name="submit" value="送信する" />
  <input type="hidden" id="mw_wp_form_token" name="mw_wp_form_token" value="b8d042c5e3" />
  <input type="hidden" name="_wp_http_referer" value="/118" />
  <input type="hidden" name="mw-wp-form-form-id" value="126" />
  <input type="hidden" name="mw-wp-form-form-verify-token" value="74b785a12369224b18da26f7e41b88aeac7c0295" />
</form>

jquery-imageUploader.js

(function($) {
	$.fn.imageUploader = function(options) {
	
		var params = $.extend({}, $.fn.imageUploader.defaults, options);

		var nowLoading = false; // 処理中フラグ
		var dropAreaSelector = params.dropAreaSelector;
		var maxFileSize = params.maxFileSize;
		var thumbnail_width = params.thumbnail_width;
		var thumbnail_height = params.thumbnail_height;
		var successCallback = params.successCallback;
		var errorCallback = params.errorCallback;

		var init = function(target) {

			// ファイルドロップ時のイベントリスナー
			var dropArea = $(dropAreaSelector);
			dropArea.on('dragenter', function (event) {
				event.preventDefault();
				event.stopPropagation();
			});
			dropArea.on('dragover', function (event) {
				event.preventDefault();
				event.stopPropagation();
			});
			dropArea.on('drop', function (event) {
				event.preventDefault();
				event.stopPropagation();
				var files = event.originalEvent.dataTransfer.files;
				if (files.length === 0) {
					return;
				}
				exec(event.originalEvent.dataTransfer);
			});
			
			// ファイル選択時のイベントリスナー
			$(target).change(function(){
				if (this.files.length === 0) {
					return;
				}
				exec(this);
			});
		}

		var exec = function(obj) {

			// ファイルAPIに対応していない場合は、エラーメッセージを表示する
			if (!window.File || !window.FileReader || !window.FileList || !window.Blob){
				errorCallback(['お使いのブラウザはファイルAPIに対応していません。']);
				return;
			}
				
			if (nowLoading) {
				errorCallback(['処理中です。']);
				return;
			}
		
			$.each(obj.files, function(i, file){

				nowLoading = true;

				function getExt(filename) {
					var pos = filename.lastIndexOf('.');
					if (pos === -1) return '';
					return filename.slice(pos + 1);
				}
				var ext = getExt(file.name).toLowerCase();

				if (ext === 'heic') {
					// HEIC対応 iphone11 以降で撮影された画像にも対応する
					// console.log('HEIC形式の画像なのでJPEGに変換します。')

					heic2any({
						blob: file,
						toType: "image/jpeg",
						quality: 1
					}).then(function(resultBlob) {
						var errors = validate(resultBlob);
						if (0 < errors.length) {
							errorCallback(errors);
							nowLoading = false;
							return;
						}
						resize(resultBlob, function(res) {
							res.fileName = file.name;
							successCallback(res);
							nowLoading = false;
						}, function(errors) {
							errorCallback(errors);
							nowLoading = false;
							return;
						});
					});
				} else {

					var errors = validate(file);
					if (0 < errors.length) {
						errorCallback(errors);
						nowLoading = false;
						return;
					}
					resize(file, function(res) {
						successCallback(res);
						nowLoading = false;
					}, function(errors) {
						errorCallback(errors);
						nowLoading = false;
						return;
					});
				}

			});

		}

		// 入力チェック
		var validate = function(blob) {
			var errors = [];
			// ファイルサイズチェック
			if( maxFileSize < blob.size ){
				errors.push('画像ファイルのファイルサイズが最大値('+Math.floor(maxFileSize/1000000)+'MB)を超えています。');
			}
			return errors;
		}

		// そのままの
		var resize = function(blob, callback, errorCallback) {
			var image = new Image();
			var fr=new FileReader();
			fr.onload=function(evt) {
				// リサイズする
				image.onload = function() {
					var width, height;
					if(image.width > image.height){
						// 横長の画像は横のサイズを指定値にあわせる
						var ratio = image.height/image.width;
						width = thumbnail_width;
						height = thumbnail_width * ratio;
					} else {
						// 縦長の画像は縦のサイズを指定値にあわせる
						var ratio = image.width/image.height;
						width = thumbnail_height * ratio;
						height = thumbnail_height;
					}
					// サムネ描画用canvasのサイズを上で算出した値に変更
					var canvas = $('<canvas id="canvas" width="0" height="0" ></canvas>')
						.attr('width', width)
						.attr('height', height);
					var ctx = canvas[0].getContext('2d');
					// canvasに既に描画されている画像をクリア
					ctx.clearRect(0,0,width,height);
					// canvasにサムネイルを描画
					ctx.drawImage(image,0,0,image.width,image.height,0,0,width,height);

					// canvasからbase64画像データを取得
					var base64 = canvas.get(0).toDataURL('image/jpeg');
					// base64からBlobデータを作成
					var barr, bin, i, len;
					bin = atob(base64.split('base64,')[1]);
					len = bin.length;
					barr = new Uint8Array(len);
					i = 0;
					while (i < len) {
						barr[i] = bin.charCodeAt(i);
						i++;
					}
					var resizeBlob = new Blob([barr], {type: 'image/jpeg'});
					callback({
						fileName: blob.name,
						ofileData: evt.target.result,
						fileData: base64,
						ofileSize: blob.size,
						fileSize: resizeBlob.size,
						fileType: resizeBlob.type
					})
				}
				image.onerror = function() {
					errorCallback(['選択されたファイルをロードできません。']);
				}
				image.src = evt.target.result;
			}
			fr.readAsDataURL(blob);
		}

		$(this).each(function() {
			init(this);
		});

		return this;
	}
	
	$.fn.imageUploader.defaults = {
		dropAreaSelector: '',
		maxFileSize : 6485760, // 6BM
		thumbnail_width: 500, // 画像リサイズ後の横の長さの最大値
		thumbnail_height: 500, // 画像リサイズ後の縦の長さの最大値
		successCallback : function(res) {console.log(res);},
		errorCallback : function(res) {console.log(res);}
	}

})(jQuery);

発生している問題・エラーメッセージ

画像は、アップロードした原本が登録されてしまいます。
base64画像データ？（小さくした画像）を送信したいです。

よろしくお願いいたします。