hocker-bearbeiten-und-drucken.php

Quell Code

<?php
session_start(); 
if(isset($_POST['submit'])){
$datei = $_FILES['datei']['name']; // Dies hab ich noch nicht getestet, da ich den Namen immer nach datum und user id abgespeichert hab. 
$datei = str_replace(" ", "_", "$datei"); 
$datei = htmlentities($datei); // Mit leerzeichen -> _ hab ich auch noch nicht getestet, sollte aba klappen 
$dateityp = GetImageSize($_FILES['datei']['tmp_name']); 

if($dateityp[2] == 2) { 
//echo "<pre>";
//echo "FILES:<br>";
//print_r ($_FILES );
//echo "</pre>";
   if($_FILES['datei']['size'] <  2048000){ //max. Größe in bytes { 
      move_uploaded_file($_FILES['datei']['tmp_name'], "upload/temp-$datei"); 

echo '<img src="'.$src.'">';
                  $target    = "upload/$datei"; 
                  $name=$target;
    $file = "upload/temp-$datei"; 

//$imgData = base64_encode(file_get_contents($file));

//$name = 'data: '.mime_content_type($file).';base64,'.$imgData;
                 
                  $max_width   = "100"; //Breite ändern 
                  $max_height   = "100"; //Höhe ändern 
                  $quality     = "90"; //Qualität ändern (max. 100) 
                  $src_img     = imagecreatefromjpeg($file); 
                  $picsize     = getimagesize($file); 
                  $src_width   = $picsize[0]; 
                  $src_height  = $picsize[1]; 
                   
                  if($src_width > $src_height) { 
                      if($src_width > $max_width) { 
                         $convert = $max_width/$src_width; 
                         $dest_width = $max_width; 
                         $dest_height = ceil($src_height*$convert); 
                     } else { 
                         $dest_width = $src_width; 
                         $dest_height = $src_height; 
                     } 
                   } else { 
                   if($src_height > $max_height) { 
                        $convert = $max_height/$src_height; 
                        $dest_height = $max_height; 
                        $dest_width = ceil($src_width*$convert); 
                   } else { 
                        $dest_height = $src_height; 
                        $dest_width = $src_width; 
                   } 
                  } 
                  $dst_img = imagecreatetruecolor($dest_width,$dest_height); 
                  imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, $dest_width, $dest_height, $src_width, $src_height);
                  imagejpeg($dst_img, "$target", $quality); 




/*

// Ab hier wird noch eine Thumbnail erstellt.  
                  $file2       = "upload/$datei"; 
                  $target2    = "upload/thumbnail-$datei"; 
                  $max_width   = "150"; //Thumbnailbreite 
                  $max_height   = "150"; //Thumbnailhöhe 
                  $quality     = "90"; //Thumbnailqualität 
                  $src_img     = imagecreatefromjpeg($file2); 
                  $picsize     = getimagesize($file2); 
                  $src_width   = $picsize[0]; 
                  $src_height  = $picsize[1]; 
                   
                  if($src_width > $src_height) 
                  { 
                  if($src_width > $max_width) 
                  { 
                    $convert = $max_width/$src_width; 
                    $dest_width = $max_width; 
                    $dest_height = ceil($src_height*$convert); 
                  } 
                  else 
                  { 
                    $dest_width = $src_width; 
                    $dest_height = $src_height; 
                  } 
                  } 
                  else 
                  { 
                  if($src_height > $max_height) 
                  { 
                    $convert = $max_height/$src_height; 
                    $dest_height = $max_height; 
                    $dest_width = ceil($src_width*$convert); 
                  } 
                  else 
                  { 
                    $dest_height = $src_height; 
                    $dest_width = $src_width; 
                  } 
                  } 
                  $dst_img = imagecreatetruecolor($dest_width,$dest_height); 
                  imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, $dest_width, $dest_height, $src_width, $src_height);
                  imagejpeg($dst_img, "$target2", $quality); 
 
                 // unlink($file); 
               //echo "<img src=\"$name\">"; 
*/
                          ?>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <style>
#draggable{
  height:50px;
  width:100px;
  border:3px solid black;
  overflow:hidden;
 
}
#bb{
  display:flex;
  width:250px;
  text-align:center;
}
.dreh >img{
  height:30px;
  width:30px;
}


#draggable>img{
  width:100%;
  height:100%;
}
footer{
  position:fixed;
  display:flex;
  bottom:0;
  left:0;
}
header{
  position:fixed;
  display:flex;
  top:0;
  left:0;
}
button{
  height:40px;
}
footer> p{
  border:2px solid red;
  width:calc(100vw / 6)
}
#can{
  border:3px solid orange;
    margin-top:80px;
  margin-bottom:80px;
}
main{
  height:500px;
  display:block;
background-image:url(https://blog.kalaydo.de/blog/wp-content/uploads/2016/10/Ikea-Frosta-Beine.jpg);
background-size:contain;
background-repeat:no-repeat;
}
  </style>
  <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <!--
   <script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
  <script src="http://www.nihilogic.dk/labs/canvas2image/base64.js"></script>
  <script src="http://www.nihilogic.dk/labs/canvas2image/canvas2image.js"></script>
  -->
  <script>
  $( function() {
  $('#formaus').css('display','none');
    $( "#draggable" ).draggable().resizable();
  });
  </script>
</head>
<body>
<header>
  <button class="dreh" type="button" data-wert="plus" ><img src="https://image.freepik.com/freie-ikonen/drehen-sie-nach-rechts_318-121667.jpg"></button>
  <button  class="dreh" type="button" data-wert="minus"><img src="https://image.freepik.com/freie-ikonen/nach-links-drehen_318-121661.jpg"></button> 
  <div id="bb">
  <div id="vor"></div>
  <button id="border" min="0" max="50">Border-radius on/off</button>
  <div id="nach"></div>
  </div>
  <form action="hocker-Bild-bearbeiten-und-druckauftragsbestatigung.php" method="POST">
       <input type="hidden" id="top1" name="top" value="0">
     <input type="hidden" id="left1" name="left" value="0">
     <input type="hidden" id="height1" name="height" value="0">
     <input type="hidden" id="width1" name="width" value="0">
     <input type="hidden" id="winkel1" name="winkel" value="0">
     <input type="hidden" id="radius1" name="radius" value="0">
     <input type="hidden" id="link1" name="link" value="<?php echo $name; ?>">
  <input type="submit"  name="weg" value="Speichern und bestellen">
  
  </form><h3>Schiebe und resizable das Bild an der gewünschten position</h3>
  </header>
  <div id="can">
  <main id="can1">
<div id="draggable" class="ui-widget-content">
<img src="<?php echo $name; ?>">
</div>
 </main>
 </div>
 <script>
   bo=false;
   j=2;
   $('#border').click(function(){
     if(bo==false){
       bo1=true;
       $('#border').html('Border-radius on');
       $('#vor').html('<button id="hoch">plus</button>')
       $('#nach').html('<button id="runter">minus</button>')
       $('#hoch').click(function(){
            j++;
         if(j>50){
           j=0;
         }
            $('#draggable').css('borderRadius',j+'%');
           $('#radius').html(j+' %');
             $('#radius1').val(j)
       })
       $('#runter').click(function(){
            j--;
         if(j<0){
           j=50;
         }
            $('#draggable').css('borderRadius',j+'%');
           $('#radius').html(j);
           $('#radius1').val(j)
       })
      
       
     }else{
       $('#hoch,#runter').remove();
       bo1=false;
        $('#radius').html('0');
         $('#radius1').val('0')
       $('#border').html('Border-radius off');
          $('#draggable').css('border-radius','0%');
     }
     bo=bo1;
   })
 $('#send').click(function(){
 xpos=$('#draggable').position();
xtop=xpos.top;
xleft=xpos.left;
height=$('#bild').height();
width=$('#bild').width();
alert(xtop+'<br>'+xleft+'<br>'+height+'<br>'+width);
 })

 $('#draggable').draggable({
      start: function() {
      },
      drag: function() {
      xpos=$('#draggable').position();
    xtop=xpos.top.toFixed(2);
    xleft=xpos.left.toFixed(2);
    height=$('#draggable').height().toFixed(2);
    width=$('#draggable').width().toFixed(2); 
    $('#top').html(xtop);
    $('#top1').val(xtop);
    $('#left').html(xleft);
    $('#left1').val(xleft);
    $('#height').html(height)
    $('#height1').val(height);
    $('#width').html(width);
    $('#width1').val(width);
    
      },
      stop: function() {
      }
    });
$('#draggable').resize(function() {
      xpos=$('#draggable').position();
    xtop=xpos.top.toFixed(2);
    xleft=xpos.left.toFixed(2);
    height=$('#draggable').height().toFixed(2);
    width=$('#draggable').width().toFixed(2); 
    $('#top').html(xtop);
    $('#top1').val(xtop);
    $('#left').html(xleft);
    $('#left1').val(xleft);
    $('#height').html(height)
    $('#height1').val(height);
    $('#width').html(width);
    $('#width1').val(width);
});
   g=0;
   $('.dreh').click(function(){
     hoch=$(this).data('wert');
     if(hoch=='plus'){
       g++;
     }else{
       g--;
     }
     if(g==361){
       g=1;
     }
     if(g<=0){
       g=360;
     }
      $('#winkel').html(g+' C'); 
      $('#winkel1').val(g);
      $('#draggable').css('transform','rotate('+g+'deg)');
   })
 </script>
 
 
 
 <script>
 $(function() { 
 $("#Save").click(function(){ 
    height=$('#height1').val();
      width=$('#width1').val();
          top=$('#top1').val();
        left=$('#left1').val();
    winkel=$('#winkel1').val();
    radius=$('#radius1').val();
          weg=$('main').val();
          
                   $.ajax({
                      type: 'POST',
                      url: 'loesungen/index.php?ordner=loesungen&name=hocker-Bild-bearbeiten-und-druckauftragsbestatigung.php',
                      data: {weg:weg,height:height,width:width,top:top,left:left,winkel:winkel,radius:radius},
                      success: function(data){ 
                         $('body').html(data);
                      }
                });
/*
    
        html2canvas($("#can1"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#out").append(canvas);
                // Clean up 
                //document.body.removeChild(canvas);
            }
        });
        */
    });
}); 

 
 
 </script>
 
 
 <footer>
 <p>Top : <span id="top"></span>Px</p>
  <p>Left : <span id="left"></span>Px</p>
   <p>Height : <span id="height"></span>Px</p>
   <p>Width : <span id="width"></span>Px</p>
   <p>Winkel :<span id="winkel"></span>C</p>
     <p>Radius :<span id="radius"></span>%</p>

     
     
     
 </footer>
 
</body>
</html>    
<?php
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  } 

   else 
      { 
         echo "<center><b>Das Bild darf nicht größer als 2MB sein</b></center>"; 
      } 

    } 

else 
    { 
    echo "<center><b>Bitte nur Bilder im JPG Format hochladen</b></center>"; 
    } 
          


 
function dateiname_bereinigen($dateiname)
{
    // erwünschte Zeichen erhalten bzw. umschreiben
    // aus allen ä wird ae, ü -> ue, ß -> ss (je nach Sprache mehr Aufwand)
    // und sonst noch ein paar Dinge (ist schätzungsweise mein persönlicher Geschmach ;)
    $dateiname = strtolower ( $dateiname );
    $dateiname = str_replace ('"', "-", $dateiname );
    $dateiname = str_replace ("'", "-", $dateiname );
    $dateiname = str_replace ("*", "-", $dateiname );
    $dateiname = str_replace ("ß", "ss", $dateiname );
    $dateiname = str_replace ("ß", "ss", $dateiname );
    $dateiname = str_replace ("ä", "ae", $dateiname );
    $dateiname = str_replace ("ä", "ae", $dateiname );
    $dateiname = str_replace ("ö", "oe", $dateiname );
    $dateiname = str_replace ("ö", "oe", $dateiname );
    $dateiname = str_replace ("ü", "ue", $dateiname );
    $dateiname = str_replace ("ü", "ue", $dateiname );
    $dateiname = str_replace ("Ä", "ae", $dateiname );
    $dateiname = str_replace ("Ö", "oe", $dateiname );
    $dateiname = str_replace ("Ü", "ue", $dateiname );
    $dateiname = htmlentities ( $dateiname );
    $dateiname = str_replace ("&", "und", $dateiname );
    $dateiname = str_replace ("+", "und", $dateiname );
    $dateiname = str_replace ("(", "-", $dateiname );
    $dateiname = str_replace (")", "-", $dateiname );
    $dateiname = str_replace (" ", "-", $dateiname );
    $dateiname = str_replace ("\'", "-", $dateiname );
    $dateiname = str_replace ("/", "-", $dateiname );
    $dateiname = str_replace ("?", "-", $dateiname );
    $dateiname = str_replace ("!", "-", $dateiname );
    $dateiname = str_replace (":", "-", $dateiname );
    $dateiname = str_replace (";", "-", $dateiname );
    $dateiname = str_replace (",", "-", $dateiname );
    $dateiname = str_replace ("--", "-", $dateiname );
 
    // und nun jagen wir noch die Heilfunktion darüber
    $dateiname = filter_var($dateiname, FILTER_SANITIZE_URL);
    return ($dateiname);
}
}
?>
 <h5>Lade ein Bild hoch,und plaziere das Bild aufden hocker</h5>
<form id="formaus" name="uploadformular" enctype="multipart/form-data" action="hocker-bearbeiten-und-drucken.php" method="post">
Datei auswählen: <input type="file" name="datei" size="60" maxlength="255">
<input type="Submit" name="submit" value="Ausgewählte Datei hochladen">
</form>