时间戳

首页 > 解决方案 > 使用 Croppie jquery 插件裁剪和上传图像

javascript - 使用 Croppie jquery 插件裁剪和上传图像

问题描述

使用Croppie 插件裁剪和上传图像 工作正常的示例代码如下

<html lang="en">
<head>
  <title>PHP and jQuery - Crop Image and Upload using Croppie plugin</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.js"></script>

  <meta name="csrf-token" content="{{ csrf_token() }}">
  <style>
  .croppie-container .cr-vp-circle
  {
    border-radius:0
  }
  .cr-slider-wrap
  {
    display:none
  }
  </style>
</head>

<body>
<div class="container">
  <div class="card" style="max-height: 500px;">
    <div class="card-header bg-info" style="display:none">PHP and jQuery - Crop Image and Upload using Croppie plugin</div>
    <div class="card-body">

      <div class="row">
        <div class="col-md-4 text-center">
        <div id="upload-demo"></div>
        </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>

        <div class="col-md-4" style="background: #9d9d9d;">
        <div id="preview-crop-image" style="background: #fff;
    width: 200px;
    margin: 50px 72px;
    height: 200px;"></div>
        </div>
      </div>

    </div>
  </div>
</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: 'square' //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 (event) {
  resize.croppie('result', {
    type: 'canvas',
    size: 'viewport'
  }).then(function (img) {
  alert(img)
    $.ajax({
      url: "cropping.php",
      type: "POST",
      data: {"image":img},
      success: function (data) {
        html = '<img src="' + img + '" />';
        $("#preview-crop-image").html(html);
      }
    });
  });
});


</script>


</body>
</html>

但是croppie插件的结果是画布，即base64，但我们希望croppie插件的结果与文件上传一样，以便我们可以访问裁剪后的图像$_FILES，如何实现请建议我们。

标签： javascriptphpajax

解决方案

Croppiecanvas.drawImage(...)用于处理图像，因此您无法在使用文件输入字段上传文件时上传图像。您可以做的是，提交 base64 编码字符串并在您的服务器中重建（base64 解码）图像。

$imageName = $uuid.".png";

// extracting the base64 encoded string from the request payload
$imageArray = explode(";", $_POST['imagebase64']);
$imageContents = explode(",", $imageArray[1]);

$imagebase64 = base64_decode($imageContents[1]);

// saving the image to a temp file
$tempPath = sys_get_temp_dir()."/".$imageName;
file_put_contents($tempPath, $imagebase64);

现在您已将上传的图像保存在$tempPath

推荐阅读