# convert -version
Version: ImageMagick 7.0.8-45 Q16 x86_64 2019-05-13 https://imagemagick.org
Copyright: © 1999-2019 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI Modules OpenMP(3.0)
Delegates (built-in): bzlib cairo djvu fftw fontconfig freetype gvc jng jp2 jpeg
 lcms ltdl openexr pangocairo png rsvg tiff webp wmf x xml zlib

<form action="" method="post" enctype="multipart/form-data">
  <input type="file" class="image_upload_button" id="uploaded_image_1" name="uploaded_image_1">
  <input type="file" class="image_upload_button" id="uploaded_image_2" name="uploaded_image_2">

  <input type="text" id="point1_1x" name="point1_1x" size="4">
  <input type="text" id="point1_1y" name="point1_1y" size="4">
  <input type="text" id="point1_2x" name="point1_2x" size="4">
  <input type="text" id="point1_2y" name="point1_2y" size="4">
|
  <input type="text" id="point2_1x" name="point2_1x" size="4">
  <input type="text" id="point2_1y" name="point2_1y" size="4">
  <input type="text" id="point2_2x" name="point2_2x" size="4">
  <input type="text" id="point2_2y" name="point2_2y" size="4">

<input type="submit">
<br>
<img id="preview_uploaded_image_1">
<img id="preview_uploaded_image_2">

<script>
{literal}
// todo: 思いっきり2回書いてるのでこなれてませんわ
document.getElementById('uploaded_image_1').addEventListener('change', function (e) {
    var file = e.target.files[0];
    var blobUrl = window.URL.createObjectURL(file);
    var img = document.getElementById('preview_uploaded_image_1');
    img.src = blobUrl;
});
document.getElementById('uploaded_image_2').addEventListener('change', function (e) {
    var file = e.target.files[0];
    var blobUrl = window.URL.createObjectURL(file);
    var img = document.getElementById('preview_uploaded_image_2');
    img.src = blobUrl;
});


// ターゲットにする img 要素ですわ
const targetImage1 = document.getElementById('preview_uploaded_image_1');
const targetImage2 = document.getElementById('preview_uploaded_image_2');

// クリックイベント登録ですわ
targetImage1.onclick =( evt )=> {
  console.log( `( ${ evt.offsetX }, ${ evt.offsetY } )` );
  if ($('#point1_1x').val() == "") {
    $('#point1_1x').val(evt.offsetX);
    $('#point1_1y').val(evt.offsetY);
  } else {
    $('#point1_2x').val(evt.offsetX);
    $('#point1_2y').val(evt.offsetY);
  }
};
targetImage2.onclick =( evt )=> {
  console.log( `( ${ evt.offsetX }, ${ evt.offsetY } )` );
  if ($('#point2_1x').val() == "") {
    $('#point2_1x').val(evt.offsetX);
    $('#point2_1y').val(evt.offsetY);
  } else {
    $('#point2_2x').val(evt.offsetX);
    $('#point2_2y').val(evt.offsetY);
  }
};
{/literal}
</script>

<?php

if (count($_FILES) >= 2) {
    $uploadedImage1 = $_FILES['uploaded_image_1']['tmp_name'];
    $uploadedImage2 = $_FILES['uploaded_image_2']['tmp_name'];

    $_exploded = explode("/", $uploadedImage1);
    $name1 = $_exploded[2];
    $_exploded = explode("/", $uploadedImage2);
    $name2 = $_exploded[2];

    $publicImageDirBase = "/home/xxxx/public_html/image/nakawari/";
    $path1 =  $publicImageDirBase . $name1;
    $path2 =  $publicImageDirBase . $name2;

    move_uploaded_file($uploadedImage1, $path1);
    move_uploaded_file($uploadedImage2, $path2);

    $inputPoints = []; // [1,2][1,2]['x','y'] // [1枚目,2枚目][1クリックめ、2クリックめ][x座標,y座標]
    $inputPoints[1][1]['x'] = (int)$_POST['point1_1x'];
    $inputPoints[1][1]['y'] = (int)$_POST['point1_1y'];
    $inputPoints[1][2]['x'] = (int)$_POST['point1_2x'];
    $inputPoints[1][2]['y'] = (int)$_POST['point1_2y'];

    $inputPoints[2][1]['x'] = (int)$_POST['point2_1x'];
    $inputPoints[2][1]['y'] = (int)$_POST['point2_1y'];
    $inputPoints[2][2]['x'] = (int)$_POST['point2_2x'];
    $inputPoints[2][2]['y'] = (int)$_POST['point2_2y'];

    ////// 中間点がどこになるか計算しますわ
    // それぞれの入力画像でのクリック点(2点)の中間点 = midPoints ですわ
    $midPoints = []; // [1, 2]['x', 'y'] // [1枚目の中点, 2枚目の][x座標, y]
    $midPoints[1]['x'] = ($inputPoints[1][1]['x'] + $inputPoints[1][2]['x']) / 2;
    $midPoints[1]['y'] = ($inputPoints[1][1]['y'] + $inputPoints[1][2]['y']) / 2;
    $midPoints[2]['x'] = ($inputPoints[2][1]['x'] + $inputPoints[2][2]['x']) / 2;
    $midPoints[2]['y'] = ($inputPoints[2][1]['y'] + $inputPoints[2][2]['y']) / 2;

    // 2つの中間点の間をとって、出力する画像での中間点を求めますわ
    // (2つの入力画像は、中間点がこの位置に来るような移動処理を後で受けますわ)
    $newmid = []; //['x', 'y']
    $newmid['x'] = ($midPoints[1]['x'] + $midPoints[2]['x']) / 2;
    $newmid['y'] = ($midPoints[1]['y'] + $midPoints[2]['y']) / 2;
 
    ////// 2つの入力画像を、新中間点に向けて平行移動させますわ
    $movedPath1 = $publicImageDirBase . "move_1";
    $movedPath2 = $publicImageDirBase . "move_2";

    // moveは距離がマイナスだと反対方向に動かす便利な自作メソッドですの
    ImageUtil::move('right', $newmid['x'] - $midPoints[1]['x'], $path1, $movedPath1);
    ImageUtil::move('down',  $newmid['y'] - $midPoints[1]['y'], $movedPath1, $movedPath1);
    ImageUtil::move('right', $newmid['x'] - $midPoints[2]['x'], $path2, $movedPath2);
    ImageUtil::move('down',  $newmid['y'] - $midPoints[2]['y'], $movedPath2, $movedPath2);

    ////// 以下、幅の大きさを拡縮して揃えますわ (すると、同じ大きさで重なることになりますの)
    $width = []; // [1, 2] 1枚目の指定点間の幅と2枚目の指定点間の幅
    $width[1] = $inputPoints[1][2]['x'] - $inputPoints[1][1]['x'];
    $width[2] = $inputPoints[2][2]['x'] - $inputPoints[2][1]['x'];

    $widthAverage = ($width[1] + $width[2]) / 2;
    $toMultiplyProportions = []; // [1, 2]
    $toMultiplyProportions[1] = $widthAverage / $width[1];
    $toMultiplyProportions[2] = $widthAverage / $width[2];

    // 1枚めの画像の高さと幅を新画像の高さと幅にしますわ
    // todo: サブメソッドに切れそうですわ
    $result = exec("identify ${path1} 2>&1");
    $_exploded = explode(" ", $result);
    $originalSizes = $_exploded[2];
    $_exploded = explode("x", $originalSizes);
    $originalWidth = $_exploded[0];
    $originalHeight = $_exploded[1];

    // 拡縮は、newmid中心に行いますわ
    for($i = 1; $i <= 2; $i++){
        if ($i >= 3) {
            break;
        }

        //// 拡大の場合
        if ($toMultiplyProportions[$i] > 1.0) {
            // まず、拡大すると元のサイズになるサイズを とりあえずnewmid中心に切り出しますわ
            // …ではなく、centMid(切り出し位置を真ん中に求めた時のmid割合的な位置ですわ)と
            // 本当のmidの距離を出しますわ (大学入試で訓練した力が発揮されますわ)
            $cutOffWidth = round($originalWidth / $toMultiplyProportions[$i]);
            $cutOffHeight = round($originalHeight / $toMultiplyProportions[$i]);

            $midProportion = []; // ['x', 'y']
            $midProportion['x'] = $newmid['x'] / $originalWidth;
            $midProportion['y'] = $newmid['y'] / $originalHeight;

            $centMid = []; //['x', 'y']
            $centMid['x'] = ($originalWidth / 2) - ($cutOffWidth / 2) + ($cutOffWidth * $midProportion['x']);
            $centMid['y'] = ($originalHeight / 2) - ($cutOffHeight / 2) + ($cutOffHeight * $midProportion['y']);
//var_dumP("centMid");
//var_dumP($centMid);
            //$cutOffOffsetX = max(round($newmid['x'] - ($cutOffWidth / 2)), 0);
            //$cutOffOffsetY = max(round($newmid['y'] - ($cutOffHeight / 2)), 0);
            //$cutOffOffsetX = max(round($newmid['x'] - $centMid['x']), 0);
            //$cutOffOffsetY = max(round($newmid['y'] - $centMid['y']), 0);
            $cutOffCenterX = round(($originalWidth / 2) + round($newmid['x'] - $centMid['x']));
            $cutOffCenterY = round(($originalHeight / 2) + round($newmid['y'] - $centMid['y']));
            //$cutOffOffsetX = round(($originalWidth - $cutOffWidth) / 2);
            //$cutOffOffsetY = round(($originalHeight - $cutOffHeight) / 2);
            // ↑ 試行錯誤の跡ですわ (大学入試も何回か試して試行錯誤できれば解けますわ)

            $cutOffOffsetX = round($cutOffCenterX - ($cutOffWidth / 2));
            $cutOffOffsetY = round($cutOffCenterY - ($cutOffHeight / 2));


            $cutOffPath = $publicImageDirBase . "cutoff";
            $cutOffInputPath = $movedPath1;
            if ($i == 2) {
               $cutOffInputPath = $movedPath2;
            }

            $result = exec("convert ${cutOffInputPath} -crop ${cutOffWidth}x${cutOffHeight}+${cutOffOffsetX}+${cutOffOffsetY} ${cutOffPath} 2>&1");

            // 切り出したものを拡大しますわ
            $magnifiedPath = $movedPath1;
            if ($i == 2) {
                $magnifiedPath = $movedPath2;
            }
            $magnifyPercentage = round($toMultiplyProportions[$i] * 100);
            $result = exec("convert ${cutOffPath} -resize ${magnifyPercentage}% ${magnifiedPath} 2>&1");
        }

        //// 縮小の場合
        if ($toMultiplyProportions[$i] < 1.0) {
            // まず、そのまま縮小しますわ
            $shrinkInputPath = $movedPath1;
            if ($i == 2) {
               $shrinkInputPath = $movedPath2;
            }
            $magnifyPercentage = round($toMultiplyProportions[$i] * 100);

            $shrinkedPath = $publicImageDirBase . "shrinked";

            $result = exec("convert ${shrinkInputPath} -resize ${magnifyPercentage}% ${shrinkedPath} 2>&1");

            // つぎに、 newmid 中心に配置しますわ (そのためには、縮小後の画像の幅と高さが必要ですわ)
            // 配置先は、元のinput 画像ですわ (overで配置しますわ) (このようにすることで、背景が無い箇所をなくしますわ)
            // todo: サブメソッドに切れそうですわ
            $result = exec("identify ${shrinkedPath} 2>&1");
            $_exploded = explode(" ", $result);
            $shrinkedSizes = $_exploded[2];
            $_exploded = explode("x", $shrinkedSizes);
            $shrinkedWidth = $_exploded[0];
            $shrinkedHeight = $_exploded[1];

            $shrinkedMid = []; // ['x', 'y']
            $shrinkedMid['x'] = $newmid['x'] * $toMultiplyProportions[$i];
            $shrinkedMid['y'] = $newmid['y'] * $toMultiplyProportions[$i];

            //$overOffsetX = max(round($newmid['x'] - ($shrinkedWidth / 2)), 0);
            //$overOffsetY = max(round($newmid['y'] - ($shrinkedHeight / 2)), 0);
            //$overOffsetX = round(($originalWidth - $shrinkedWidth) / 2) + round( $newmid['x'] - ($originalWidth / 2)  );
            //$overOffsetY = round(($originalHeight - $shrinkedHeight) / 2) + round( $newmid['y'] - ($originalHeight / 2) );

//echo "newmid: " . $newmid['x'] . "," .$newmid['y'] . "shrinkedMid: "  . $shrinkedMid['x']. "," . $shrinkedMid['y'];
            $overOffsetX = round($newmid['x'] - $shrinkedMid['x']);
            $overOffsetY = round($newmid['y'] - $shrinkedMid['y']);
            // ↑ 試行錯誤の跡2ですわ (大学入試も何回か試せれば解けますわ)

            $originalPath = $path1;
            $magnifiedPath = $movedPath1;
            if ($i == 2) {
                $originalPath = $path2;
                $magnifiedPath = $movedPath2;
            }
            $result = exec("composite -gravity northwest -geometry +${overOffsetX}+${overOffsetY} -compose over ${shrinkedPath} ${originalPath} ${magnifiedPath} 2>&1");
        }
    }

    ////// 最後に、moveや拡大縮小したものを重ね合わせますわ
    $blendPath = $publicImageDirBase . "blend";
    $composePath = $publicImageDirBase . "composed";

    $output = [];
    $result = exec("composite -blend 50x50 ${movedPath1} ${movedPath2} ${blendPath} 2>&1", $output);

    // 重ね合わせる時に、片方しか存在しない領域は色が薄くなってしまいますので、
    // Xor で重なってないところだけの画像を用意して、最後にそれと重ね合わせますわ
    $substractPath = $publicImageDirBase . "substruct";
    $result = exec("convert ${movedPath1} ${movedPath2} -compose Xor -composite ${substractPath} 2>&1", $output);
    $result = exec("composite -compose darken ${blendPath} ${substractPath} ${composePath} 2>&1", $output); 
}

<?php

class ImageUtil{

    /**
     * 逆方向を返しますわ
     * @param String 'down' / 'up' / 'right' / 'left'
     * @return String
     */
    public static function reverseDirection($direction) {
        switch ($direction) {
            case 'down':
                return 'up';
            case 'up':
                return 'down';
            case 'right':
                return 'left';
            case 'left':
                return 'right';
        }
    }

    /**
     * 指定した方向に、画像全体を動かし、元の方向に余白をつけます (移動した方向に見切れます)
     * (ImageMagick に元からあるコマンドでは、はみ出た部分が反対側から出てくきますので、
     *  このメソッドがありますわ)
     * @param direction string 'down' / 'right' / 'up' / 'left'
     */
    public static function move($direction, $distance, $inputPath, $outputPath) {
            $distance = round($distance);

            // distance がマイナスだったら向きを逆転させますわ
            if ($distance < 0) {
                $direction = self::reverseDirection($direction);
                $distance *= -1;
            }

            $transparentPath2 = $inputPath;
            $movedPath2 = $outputPath;

            // todo: このあたりもメソッドに切れるといいですわね3
            $result = exec("identify $transparentPath2 2>&1");
            $_exploded = explode(" ", $result);
            $sizes = $_exploded[2];
            $_exploded = explode("x", $sizes);
            $width = $_exploded[0];
            $height = $_exploded[1];

            switch ($direction) {
                case 'down':
                    $splice = '0x' . $distance;
                    $gravity = 'north';
                    break;
                case 'up':
                    $splice = '0x' . $distance;
                    $gravity = 'south';
                    break;
                case 'right':
                    $splice = $distance . 'x0';
                    $gravity = 'west';
                    break;
                case 'left':
                    $splice = $distance . 'x0';
                    $gravity = 'east';
                    break;
            }

            // ↓ では、確かに下にずらせましたが、頭の色が上余白に引き伸ばされましたわ
            //$result = exec("convert $transparentPath2 -distort Affine '10,10 10,110' $movedPath2 2>&1", $output);
            // ◎↓ これで、上に 100px 伸ばせましたわ
            $result = exec("convert $transparentPath2 -alpha set -background none -channel RGBA -fill '#00000000' -mattecolor '#00000000' -gravity ${gravity} -splice ${splice} $movedPath2 2>&1",$output);
            // 元の大きさに、 gravity を指定しつつ、切り取りますわ
            // (下を削りたいときは gravity は north ですわ)
            $result = exec("convert $movedPath2 -background none -gravity ${gravity} -extent ${width}x${height} $movedPath2 2>&1", $output); 
    }
}