cropper.jsとphpで好きな範囲で画像をトリミングする

好きな範囲で画像を切り抜くことができるライブラリ「cropper.js」とphpで画像をトリミングする

jQuery UIのdraggableでドラッグアンドドロップできる要素をつくる
cropper.jsを読み込む
座標データを格納するinputを準備する
cropper.jsの設定
受信した座標を使ってphpで画像をトリミングする

php関連記事

jQuery UIのdraggableでドラッグアンドドロップできる要素をつくる

詳細は、こちらで解説しています。

jQuery UIのdraggableで要素をドラッグアンドドロップで移動させてみる

枠代わりの要素をドラッグアンドドロップで移動させて直感的に範囲で画像のトリミングできるようなものを作りたかったので、jQuery UIのdraggableを使ってみた。デモの解説なので並べ...

cropper.jsを読み込む

html

jsを読み込む

<link href="//cdnjs.cloudflare.com/ajax/libs/cropper/3.1.6/cropper.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/cropper/3.1.6/cropper.min.js"></script>
<script src="./js/cropper_code.js"></script>

座標データを格納するinputを準備する

<div id="imgwrap">
  <img src="<?=$url?>" id="preview">
</div>
<input type="hidden" id="upload-image-x" name="profileImageX" value="0" />
<input type="hidden" id="upload-image-y" name="profileImageY" value="0" />
<input type="hidden" id="upload-image-w" name="profileImageW" value="0" />
<input type="hidden" id="upload-image-h" name="profileImageH" value="0" />

cropper.jsの設定

cropper_code.js

$(function () {
  // 初期設定
  var options =
  {
    aspectRatio: 1 / 1,
    viewMode: 1,
    zoomable: false,
    crop: function (e) {
      cropData = $('#preview').cropper("getData");
      $("#upload-image-x").val(Math.floor(cropData.x));
      $("#upload-image-y").val(Math.floor(cropData.y));
      $("#upload-image-w").val(Math.floor(cropData.width));
      $("#upload-image-h").val(Math.floor(cropData.height));
    },
    zoomable: true,
    autoCropArea: 0.5,
    minCropBoxWidth: 200,
    minCropBoxHeight: 200,
    zoomOnWheel: false,
    checkCrossOrigin: false,
    checkOrientation: false,
    zoomOnTouch: true,
    responsive: false,
    toggleDragModeOnDblclick: false
  }

  $('#preview').cropper(options);
});

受信した座標を使ってphpで画像をトリミングする

php

$p_w = $_POST['profileImageW'];
$p_h = $_POST['profileImageH'];
$x = $_POST['profileImageX'];
$y = $_POST['profileImageY'];

$url = UP_PATH_FACE.$picturename;

list($w, $h, $type) = getimagesize($url);

$resize_val = 500;

switch($type){
case IMAGETYPE_JPEG:
$in = imagecreatefromjpeg($url);
break;
case IMAGETYPE_GIF:
$in = imagecreatefromgif($url);
break;
case IMAGETYPE_PNG:
$in = imagecreatefrompng($url);
break;
}


// コピー画像のリソース
$out = imagecreatetruecolor($resize_val, $resize_val);
imagealphablending($out, false);
imagesavealpha($out, true);
// リサイズ
ImageCopyResampled($out, $in, 0, 0, $x, $y, $resize_val, $resize_val, $p_w, $p_h);

imagepng($out, UP_PATH_FACE.$picturename);

imagedestroy($out);
imagedestroy($in);