クロップした画像をS3にアップロード

やりたいこと

S3から読み込んだ画像をブラウザ上で切り抜きサーバーに保存

手順

  1. S3のバケットにCSORの設定
  2. 画面の作成
  3. 送信処理の作成

使用プラグイン

画面作成

公式サイトにDEMOが用意されているのでこちらを使用。さらに用途に合わせてカスタマイズ。

Ajax処理

Ajax処理はドキュメントを参照。

toBlobメソッドFireFox以外のブラウザでサポートされていないため、代わりにtoDataURLを使用。

var $image = $('.container > img'),
    cropBoxData,
    canvasData;

$('#crop').on('click', function(){
  base64 = $image.cropper('getCroppedCanvas').toDataURL("image/jpeg");
  base64 = base64.replace(/^.*,/, '');

  var formData = new FormData();
  formData.append('croppedImage', base64);

  $.ajax('/path/to/upload', {
    method: "POST",
    data: formData,
    processData: false,
    contentType: false,
    dataType: 'json',
    success: function () {
      console.log('Upload success');
    },
    error: function () {
      console.log('Upload error');
    }
  });

画像リソース化

$data = base64_decode($this->request->data['croppedImage']);
$im = imagecreatefromstring($data);
imagejpeg($im);

課題

元画像に比べて切り抜いた後の画像が劣化している印象。Canvasデータの取り扱いや画像変換する際の処理周辺が今後の課題かなと思いました。

参考