copper.jsでトリミングしたbase64データをリサイズしてアップロードしたい

Question

実現したいこと

PHP側で行っている画像のリサイズをjs側で行いたい。

• copper.jsを利用して画像をトリミング
• アップロードボタンを押したタイミングで指定値にリサイズ（js）
• トリミングとリサイズをした画像をPOSTでPHPに渡す（Ajax）
• 画像をデコードしてサーバーに保存（PHP）
• 結果をブラウザに通知（js）

発生している問題

実現したいことは上記なのですが、
copper.jsでbase64形式になったデータをjsでリサイズする方法がわかりません。
そのため今は応急処置的に下記のような実装になっています。

• copper.jsを利用して画像をトリミング
• トリミング後リサイズ前のbase64データをPOSTでPHPに渡す（Ajax）
• base64データをデコードして一度サーバーに保存（PHP）
• 保存した画像をまた取り出してトリミングして上書き保存（PHP）※２重アップロード状態です
• 結果をブラウザに通知（js）

※PHPでもbase64データのリサイズ方法がわからなかったので一度そのままアップロードしてます。

jsでbase64をリサイズする方法がわからないため、PHP側でリサイズをかけています。
しかし、この方法だとアップロードに時間がかかり負荷が大きいため、js側で画像処理を終わらせ、PHPではデコードとアップロードのみの処理にしたいです。

現在のソースコード

<div class="uploadbtn">アップロードボタン</div>
<img id="preview" src="data:image/jpeg;base64,/9j/4AAQSkZJRgA........">

$('.uploadbtn').click(function(){
	// 
	// おそらくここに何かしらのリサイズ処理を入れる？
	// 
	$.ajax({
		type: 'POST',
		url: "upload.php",
		data: {
			imgdata: $('#preview').cropper('getCroppedCanvas').toDataURL("image/png")
		},
		success: function(data) {
			if (data == 'UPLOAD OK') {
				alert('アップロードが完了しました。');
			} else {
				alert(data);
			}
		},
		error: function() {
			alert("サーバーエラーです。");
		}
	});
});

<?php
if ($_POST) {
	// base64デコード
	$data = $_POST['imgdata'];
	$base64data = explode (",",$data);
	$decodedata = base64_decode($base64data[1]);

	// finfo_bufferでMIMEタイプを取得
	$finfo = finfo_open(FILEINFO_MIME_TYPE);
	$mime_type = finfo_buffer($finfo, $decodedata);

	/* 拡張子情報の取得・セット */
	$imginfo = getimagesize($data);
	$filesize = strlen($decodedata)."\n";

	if($mime_type == 'image/jpeg'){
		$extension = ".jpg";
		header ('Content-Type: image/jpg');
	}
	if($mime_type == 'image/png'){
		$extension = ".png";
		header ('Content-Type: image/png');
	}
	if($mime_type == 'image/gif'){
		$extension = ".gif";
		header ('Content-Type: image/gif');
	}

	// ファイル容量が10mb以上だったらエラー
	if ($filesize <= 10000000) {
		/* 拡張子存在チェック */
		if(!empty($extension)){

			// 正式保存先ファイルパス
			$file_save = "img/testupload.jpg";

			// ファイル移動
			$result = file_put_contents($file_save, $decodedata); //ここでリサイズ前に一度保存しちゃう

			list($org_w, $org_h) = getimagesize($file_save); // 元の画像名を指定してサイズを取得

			// 拡大するサイズを指定
			$copy_w = 400;
			$copy_h = 400;

			// オリジナルファイルの画像リソース
			$org_img = imagecreatefrompng($file_save);

			// コピー画像のリソース
			$copy_img = imagecreatetruecolor($copy_w, $copy_h);

			// リサイズ
			imagecopyresized($copy_img, $org_img, 0, 0, 0, 0, $copy_w, $copy_h, $org_w, $org_h);

			// 拡大したコピー画像を表示
			imagejpeg($copy_img, $file_save, 100);

			echo "UPLOAD OK";

		} else {
			echo '選択されたファイルは対応していません。';
		}
	} else {
		echo '画像の容量が大きすぎます。';
	}
}
?>

補足情報（参照）

Cropper.jsを使ってみる

Answer 1

自己解決しました。

Imagickを使用しました。
https://www.sejuku.net/blog/74338