Question

我正在尝试创建图像裁剪工具，它应该上传图片，裁剪并在页面上将其作为image.jpg打印，而不是作为基础64（data：image）据我所知，它无法通过HTML和javascript完成。所以我试图通过PHP做到这一点。我正在上传和裁剪图像，但是无法捕获结果，无法将其上传到服务器并将其作为image.jpg打印在页面上这是我的代码，请帮助

<div id="upload-demo"></div>

        <div class="col-md-4" style="padding:5%;">
        <strong>Select image to crop:</strong>
        <input type="file" id="image">

        <button class="btn btn-success btn-block btn-upload-image" style="margin-top:2%">Upload Image</button>
        </div>

<script type="text/javascript">


var resize = $('#upload-demo').croppie({
    enableExif: true,
    enableOrientation: true,    
    viewport: { // Default { width: 100, height: 100, type: 'square' } 
        width: 200,
        height: 200,
        type: 'circle' //square
    },
    boundary: {
        width: 300,
        height: 300
    }
});


$('#image').on('change', function () { 
  var reader = new FileReader();
    reader.onload = function (e) {
      resize.croppie('bind',{
        url: e.target.result
      }).then(function(){
        console.log('jQuery bind complete');
      });
    }
    reader.readAsDataURL(this.files[0]);
});


$('.btn-upload-image').on('click', function (ev) {
  resize.croppie('result', {
    type: 'canvas',
    size: 'viewport'
  }).then(function (img) {
    $.ajax({
      type: "POST",
      data: {form_submit: 1,"image":img},
      success: function (data) {
        html = '<img src="' + img + '" />';
        $("#preview-crop-image").html(html);
      }
    });
  });
});


</script>

<?php
if(isset($_POST['form_submit'])) {
	$imageProcess = 0;
    if(is_array($_FILES)) {
        $fileName = $_FILES['image']['tmp_name'];
        $sourceProperties = getimagesize($fileName);
        $resizeFileName = time();
        $uploadPath = "./uploads/";
        $fileExt = pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION);
        $uploadImageType = $sourceProperties[2];
        $sourceImageWidth = $sourceProperties[0];
        $sourceImageHeight = $sourceProperties[1];

        move_uploaded_file($fileName, $uploadPath. $resizeFileName. ".". $fileExt);
        $imageProcess = 1;
    }

	if($imageProcess == 1){
	?>


			

				<img src="<?php echo $uploadPath.$resizeFileName.'.'. $fileExt; ?>" width="700" height="700" >

				<h4><b>Thump Image</b></h4>




	<?php

	}else{
	?>
		<div class="alert icon-alert with-arrow alert-danger form-alter" role="alert">
			<i class="fa fa-fw fa-times-circle"></i>
			<strong> Note !</strong> <span class="warning-message">Invalid Image </span>
		</div>
	<?php
	}
	$imageProcess = 0;
}
?>

Answer 1

<div id="upload-demo"></div>

        <div class="col-md-4" style="padding:5%;">
        <strong>Select image to crop:</strong>
        <input type="file" id="image">

        <button class="btn btn-success btn-block btn-upload-image" style="margin-top:2%">Upload Image</button>
        </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.3/croppie.js" type="text/javascript"></script>
<script type="text/javascript">


var resize = $('#upload-demo').croppie({
    enableExif: true,
    enableOrientation: true,    
    viewport: { // Default { width: 100, height: 100, type: 'square' } 
        width: 200,
        height: 200,
        type: 'circle' //square
    },
    boundary: {
        width: 300,
        height: 300
    }
});


$('#image').on('change', function () { 
  var reader = new FileReader();
    reader.onload = function (e) {
      resize.croppie('bind',{
        url: e.target.result
      }).then(function(){
        console.log('jQuery bind complete');
      });
    }
    reader.readAsDataURL(this.files[0]);
});


$('.btn-upload-image').on('click', function (ev) {
alert(111);
  resize.croppie('result', {
    type: 'canvas',
    size: 'viewport'
  }).then(function (img) {
    $.ajax({
      type: "POST",
      data: {form_submit: 1,"image":img},
      success: function (data) {
        html = '<img src="' + img + '" />';
        $("#preview-crop-image").html(html);
      }
    });
  });
});


</script>

<?php
if(isset($_POST['form_submit'])) {
    $imageProcess = 0;
    if(is_array($_FILES)) {
        $fileName = $_FILES['image']['tmp_name'];
        $sourceProperties = getimagesize($fileName);
        $resizeFileName = time();
        $uploadPath = "./uploads/";
        $fileExt = pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION);
        $uploadImageType = $sourceProperties[2];
        $sourceImageWidth = $sourceProperties[0];
        $sourceImageHeight = $sourceProperties[1];

        move_uploaded_file($fileName, $uploadPath. $resizeFileName. ".". $fileExt);
        $imageProcess = 1;
    }

    if($imageProcess == 1){
    ?>




                <img src="<?php echo $uploadPath.$resizeFileName.'.'. $fileExt; ?>" width="700" height="700" >

                <h4><b>Thump Image</b></h4>




    <?php

    }else{
    ?>
        <div class="alert icon-alert with-arrow alert-danger form-alter" role="alert">
            <i class="fa fa-fw fa-times-circle"></i>
            <strong> Note !</strong> <span class="warning-message">Invalid Image </span>
        </div>
    <?php
    }
    $imageProcess = 0;
}
?>
try this it should work

在同一页面上处理AJAX请求– PHP

1 个答案: