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

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

好きな範囲で画像を切り抜くことができるライブラリ「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);

コメント

タイトルとURLをコピーしました