Lösungen ,bild schneiden und auf server db speichern

bild-schneiden-und-auf-server-db-speichern.php

Quell Code

 <!doctyp html>
 <html>
 <head>
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">


</head>
<body>

 <header>
 <?php
 $bild = 'test1.png';
 if (file_exists($bild)){
  unlink('test1.png');
 }
 //'https://foliotek.github.io/Croppie/demo/cat.jpg';

 
 if(isset($_POST["submit"])) {
 
 
$target_file = basename('test1.png');
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image

    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
 

          $uploadOk = 1;
    } else {
       // echo "File is not an image.";
        $uploadOk = 0;
    }
 
if ($_FILES["fileToUpload"]["size"] > 500000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}
}
?>

<?php
 if (file_exists($bild)){
        $size = getimagesize($bild);
        var_dump($ize);
         $width=$size[0].'px';
        $height=$size[1].'px';
echo "<style>
.bild{
    border: 1px dashed rgba(255,255,255,0.2);
    width:$width;
    height:$height;
    margin: auto;
    background:url($bild);
    background-size:cover;
}</style>";
}
?>


<style>
body {
    background-color:green;
  margin:0;
  padding:0;
}


#viewport{
    width:100px;
    height:100px;
    border: 2px solid red;
    resize: both;
    overflow:hidden;
}
#viewport:active{
    cursor:move;
}
header{
    height:50px;
    border:1px solid red;
}
</style>
 <form action="bild-schneiden-und-auf-server-db-speichern.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form><?Php if (isset($uploadOk) and $uploadOk == 1) { echo "<input type='button' id='send' value='Neuen Ausschnitt erstellen'>";} ?><p><span id='x'></span></p>
 </header>
<main id="buehne" class="bild">
 
  <div id="viewport"></div>
</main>


<span id='result'></span>
<script>
 
var conti=$("#viewport");
  conti.draggable();
 conti.resizable();
 
 
   $('#viewport').mousedown(function(){
$('#viewport').mousemove(function(){
  aus=true;
  weiter(1);
}) 
})
  
  
$('#viewport').mouseout(function(){
  aus=false;
  weiter(2);
}) 
  
  
  function weiter(u){
    var top=$("#viewport").offset().top;
   var left=$("#viewport").offset().left;
   var width=$('#buehne').width();
  var wfenster=$('html').width();
    var absolutetop=top-51;
 var viewwidth=$("#viewport").width();
  var viewheight=$('#viewport').height();
  var l2=viewwidth;
  var o2=viewheight;
  var neux=wfenster-width;
  var neux=neux/2;
  var absoluteleft=left-neux;
  $('#x').html('X ='+top+'<br>Y='+left+'<br> Width bild='+width+'<br>Width Fenster ='+wfenster+'<br>left viewport '+absoluteleft+'<br>rechts viewpoint '+absolutetop+'<br>Ende left viewpoint '+l2+'<br>ende top viewpoint '+o2);

  }
 
 
 
 
 
 
 
 
 
$('#send').click(function(e){
   var top=$("#viewport").offset().top;
   var left=$("#viewport").offset().left;
   var width=$('#buehne').width();
  var wfenster=$('html').width();
    var absolutetop=top-51;
 var viewwidth=$("#viewport").width();
  var viewheight=$('#viewport').height();
  var l2=viewwidth;
  var o2=viewheight;
  var neux=wfenster-width;
  var neux=neux/2;
  var absoluteleft=left-neux;
   //  var l2=absoluteleft+viewwidth;
 // var o2=absolutetop+viewheight

 
  var zoom='';
  var orien='';
var bild='<?php echo $bild; ?>';
              $.ajax({
                type: 'POST',
                url: 'e.php',
                data: {l1:absoluteleft,o1:absolutetop,l2:l2,o2:o2,zoom:zoom,orien:orien,bild:bild},
                success: function(data){                       
                $('#x').html($('#x').html()+'<br>'+data)     
           //$('#x').html('X ='+top+'<br>Y='+left+'<br> Width bild='+width+'<br>Width Fenster ='+wfenster+'<br>left viewport '+absoluteleft+'<br>rechts viewpoint '+absolutetop+'<br>Ende left viewpoint '+l2+'<br>ende top viewpoint '+o2);
                }
            });
  
  
  
});
 
 </script>

</body>
</html>











































 <script>
  /*
  var basic = $('#demo-basic').croppie({
    viewport: {
        width: 350,
        height: 300,

    }
});
basic.croppie('bind', {
    url: '<? echo $bild; ?>',
    points: [0,0,0,0]
});
$('#x').click(function(){
var d = basic.croppie('get'); 
var  l1=d['points'][0];
 
 var o1=d['points'][1];
 
 var l2=d['points'][2];
 var o2=d['points'][3];
 var zoom=d['zoom'];
 var orien=d['orientation'];
// alert(l1+','+o1+','+l2+','+o2+','+zoom+','+orien)
 

                $.ajax({
                      type: 'POST',
                      url: 'e.php',
                      data: {l1:l1,o1:o1,l2:l2,o2:o2,zoom:zoom,orien:orien,},
                      success: function(data){ 
                         
 alert(data)
$('#result').html(JSON.stringify(d));
                      }
                  });


});
//on button click
// basic.croppie('result', 'html');

  */
</script>
 

 









































 <script>
  /*
  var basic = $('#demo-basic').croppie({
    viewport: {
        width: 350,
        height: 300,

    }
});
basic.croppie('bind', {
    url: '<? echo $bild; ?>',
    points: [0,0,0,0]
});
$('#x').click(function(){
var d = basic.croppie('get'); 
var  l1=d['points'][0];
 
 var o1=d['points'][1];
 
 var l2=d['points'][2];
 var o2=d['points'][3];
 var zoom=d['zoom'];
 var orien=d['orientation'];
// alert(l1+','+o1+','+l2+','+o2+','+zoom+','+orien)
 

                $.ajax({
                      type: 'POST',
                      url: 'e.php',
                      data: {l1:l1,o1:o1,l2:l2,o2:o2,zoom:zoom,orien:orien,},
                      success: function(data){ 
                         
 alert(data)
$('#result').html(JSON.stringify(d));
                      }
                  });


});
//on button click
// basic.croppie('result', 'html');

  */
</script>