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 ($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>