Crop with html/css/js

Asked

Viewed 221 times

0

I’m trying to use a plugin I found in this video, But I am facing the following problem: I would like to upload an image and make a Crop at 1747px wide. But for devices with width smaller than this ends up exploding as in the image below:

inserir a descrição da imagem aqui

Does anyone know how to solve this? Code below.

#uploadimageModal .modal-dialog {
    max-width: 1920px !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.js"></script>
<div class="container">
          <br />
      <h3 align="center">Image Crop & Upload using JQuery with PHP Ajax</h3>
      <br />
      <br />
   <div class="panel panel-default">
      <div class="panel-heading">Select Profile Image</div>
      <div class="panel-body" align="center">
       <input type="file" name="upload_image" id="upload_image" accept="image/*" />
       <br />
       <div id="uploaded_image"></div>
      </div>
     </div>
    </div>
    <div id="uploadimageModal" class="modal" role="dialog">
 <div class="modal-dialog">
  <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Upload & Crop Image</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="row">
       <div class="col-12 text-center">
        <div id="image_demo" style="margin-top:30px"></div>
       </div>
       <div class="col-12" style="padding-top:30px;">
        <button class="btn btn-success crop_image">Crop & Upload Image</button>
     </div>
    </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
     </div>
    </div>
</div>

<script>  
$(document).ready(function(){

 $image_crop = $('#image_demo').croppie({
    enableExif: true,
    viewport: {
      width:1747,
      height:800,
      type:'square' //circle
    },
    boundary:{
      width:1847,
      height:846
    }
  });

  $('#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(response){
      $.ajax({
        url:"upload.php",
        type: "POST",
        data:{"image": response},
        success:function(data)
        {
          $('#uploadimageModal').modal('hide');
          $('#uploaded_image').html(data);
        }
      });
    })
  });

});  
</script>

javascript html

  • Already tried to put the image with width in %, type max-width: 100% to see how it looks?

  • The image itself is not the problem, added the 100% it adapts to the container, the problem is that it has a parent div, where is the size defined in js as viewport and another div that is defined as Boundary, I believe it is in these Divs that something should be done for the image to adapt.

1 answer

2

Dude I made an adjustment in the code, first I put in the JS the width $image_crop in the viewport and boundary in 100%.

Then I determined a maximum width pro modal with max-width, but for less than that I have declared the width at 100%, this would leave the window responsive to small screens.

The result was this:

inserir a descrição da imagem aqui

Follow the image code above:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }


    #uploadimageModal .modal-dialog {
        width: 90%;
        max-width: 922px !important;
    }

</style>
</head>

<body>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.js"></script>
    <div class="container">
        <br />
        <h3 align="center">Image Crop & Upload using JQuery with PHP Ajax</h3>
        <br />
        <br />
        <div class="panel panel-default">
            <div class="panel-heading">Select Profile Image</div>
            <div class="panel-body" align="center">
                <input type="file" name="upload_image" id="upload_image" accept="image/*" />
                <br />
                <div id="uploaded_image"></div>
            </div>
        </div>
    </div>
    <div id="uploadimageModal" class="modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Upload & Crop Image</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 text-center">
                            <div id="image_demo" style="margin-top:30px"></div>
                        </div>
                        <div class="col-12" style="padding-top:30px;">
                            <button class="btn btn-success crop_image">Crop & Upload Image</button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {

            $image_crop = $('#image_demo').croppie({
                enableExif: true,
                viewport: {
                    width: '100%',
                    height: 800,

                },
                boundary: {
                    width: '100%',
                    height: 846
                }
            });

            $('#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(response) {
                    $.ajax({
                        url: "upload.php",
                        type: "POST",
                        data: {
                            "image": response
                        },
                        success: function(data) {
                            $('#uploadimageModal').modal('hide');
                            $('#uploaded_image').html(data);
                        }
                    });
                })
            });

        });

    </script>



</body>

</html>

  • Listen, I’m sorry it took me so long to get back to you, but I was running! So really the modal will be responsive, but this ends up influencing the image Rop, where it will be the size that the window is and not the size set in the viewport, which cannot happen, As I commented, Crop should be done in 1747px regardless of the window size. What has to happen is that the image should fit as it normally is ugly with a 100% width image inside a container, but when it happens Crop should be done by the size set in the viewport.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.