<?php
$path="../../";
include("../../map.php");
include("../../scripts.php");
include("../../secure.php");
include("../../../deppo/tools/script/SimpleImage.php");
$sql=mysqli_query($conn, "select * from medya where id=".$_GET["mid"].""); $rs=mysqli_fetch_assoc($sql);
?>
<style>
	.darkroom-toolbar { top: 0px !important; z-index:999999 !important; width:100%}
	.canvas-container{ width:auto !important;}
	canvas{ height:100vh !important; width:auto !important; }
	.image-container img{ height:100vh !important; }
	.lower-canvas {left: 15% !important; right: 15% !important;}
</style>
  <link rel="stylesheet" href="crop/build/darkroom.css">
<figure class="image-container target" style="text-align: center; width:100%">
	<img src="../../../deppo/image/<?php echo $rs["t1"];?>" alt="" id="target" style="max-width:100%">
</figure>
  <script src="crop/vendor/fabric.js"></script>
  <script src="crop/build/darkroom.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
	jQuery("#save").click(function() {
		 uploadEx();
	});
    var dkrm = new Darkroom('#target', {
      // Size options
      minWidth: 100,
      minHeight: 100,
      maxWidth: 600,
      maxHeight: 500,
      ratio: 4/3,
      backgroundColor: '#000',
      plugins: {
        //save: false,
        crop: {
          quickCropKey: 67, //key "c"
          //minHeight: 50,
          //minWidth: 50,
          //ratio: 4/3
        }
      },
      // Post initialize script
      initialize: function() {
        var cropPlugin = this.plugins['crop'];
        // cropPlugin.selectZone(170, 25, 300, 300);
        cropPlugin.requireFocus();
      }
    });
  </script>
	<form method="post" accept-charset="utf-8" name="form1">
		<input name="hidden_data" id='hidden_data' type="hidden"/>
	</form>
<script>
function uploadEx() {
	var canvasEl = document.querySelector('canvas');
	if (!canvasEl) return alert('Canvas bulunamadư.');
	var dataURL = canvasEl.toDataURL('image/png');
	document.getElementById('hidden_data').value = dataURL;

	var fd = new FormData(document.forms["form1"]);
	var xhr = new XMLHttpRequest();
	xhr.open('POST', 'upload_bycrop.php?ne=<?php echo $_GET["ne"]?>&islem=<?php echo $_GET["islem"]?>&id=<?php echo $_GET["id"]?>', true);
	xhr.upload.onprogress = function(e) {
		if (e.lengthComputable) {
			show('#skip');
		}
	};
	xhr.onload = function() {};
	xhr.send(fd);
}

</script>
<div id="skip" style="display:none;position: absolute; width: 100%; height: 100%; top: 0px; background: #56a508e0; color: white; padding: 15%; text-align: center; font-size: 65px;">
	<i class="fas fa-check" style="font-size: 240px;"></i>
</div>