1

在我的应用程序中，我使用croppie 裁剪图像然后预览然后上传裁剪的图像。我已经将图像裁剪为预览，但我无法在我的输入字段中设置该裁剪值。

<div class="modal fade" id="myModal" role="dialog" style="margin-top: 70px;">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Upload Profile Picture</h4>
    </div>
    <form method="POST" action="picuploaddb.php"   enctype="multipart/form-data">
        <div class="modal-body">
            <input type="hidden" name="teacherid" value="<?php echo $myteacherid;?>">
            <input type="file" class="form-control" id="upload_image" name="profile_pic"> <!-- add id-->
            <input type="file" style="display:none" class="form-control" id="upload_preview" name="profile_picpreview"> 
            <img class='img-circle' id="preview" name="profile_preview"/>

        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-success upload">Upload</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </form>
  </div>

</div>

在此模式中，我曾经选择文件并在裁剪预览并从此模式上传之后。我无法在第二个输入字段中设置裁剪图像。

$(document).ready(function(){
        $image_crop = $('#image_demo').croppie({
        enableExif: true,
        viewport: {
          width:220,
          height:250,
          type:'circle' //circle
        },
        boundary:{
          width:300,
          height:300
        }
        });
        $('#upload_image').on('change', function(){
            var reader = new FileReader();
            reader.onload = function (event) {
              $image_crop.croppie('bind', {
                url: event.target.result
              }).then(function(){
                console.log('jQuery bind complete');
              });
            }
            reader.readAsDataURL(this.files[0]);
            $('#uploadimageModal').modal('show');
        });
        $('.crop_image').click(function(event){
            $image_crop.croppie('result', {
                type: 'canvas',
                size: 'viewport'
            }).then(function(resp){
                $('#uploadimageModal').modal('hide');

                $('#upload_image').hide();

                $('#preview').attr('src',resp);

                $('#upload_preview').attr('name',resp);

                $('#upload_preview').show();//i want cropped image inside it
            });
        });
    });

这是我的croppie js。我想在 upload_preview 输入字段中设置裁剪图像。请帮助我。谢谢。

4

1 回答 1

0

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

PHP：

$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

于 2021-09-28T06:25:34.577 回答