javascript - 无论用户给出的图像尺寸如何，如何自动裁剪图像并接受方形图像

Question

无论使用时提供的图像尺寸如何，我都想在模态中接受之前将图像裁剪为正方形。

   if($picture == "NULL")
                 {
                     $message = "<img src='profilepicture/dummy.png' name= 'dogprofileimage_$id' alt='dummypic' class='img-circle img-responsive'  ' data-toggle = 'modal' data-target = '#updatedogpic_$id'>";
                 }
                 else
                 {
                    $message = "<img src='$picture' alt='dummypic' name= 'dogprofileimage_$id' class='img-circle img-responsive' data-toggle = 'modal' data-target = '#updatedogpic_$id'>";
                 }

// 这是我要添加图片的框

            <div class='container'>
<div class='row'>
    <div class='col-md-offset-4 col-md-7 col-lg-offset-3 col-lg-6'>
     <div class='well profile'>
        <div class='col-xs-12'>
            <div class='col-xs-12 col-sm-8'>
                <div id='dogrequestmessage'></div>
                <h2>$name</h2>
                <p><strong>Breed: </strong> $breed </p>
                <p><strong>Weight(in kg): </strong> $weight </p>
                <p><strong>Gender: </strong> $gender </p>
                <p><strong>Age:(in months): </strong> $age </p>
            </div>             
            <div class='col-xs-12 col-sm-4 text-center'>
                <figure>
                    $message
                </figure>
            </div>
        </div>            
        <div class='col-xs-12 divider text-center'>
            <div class='col-xs-12 col-sm-4 emphasis'>
                <button class='btn btn-success btn-block' name = 'findmatch[$id]' id = 'find_match' ><span class='fa fa-plus-circle'></span> Find Match </button>
            </div>
            <div class='col-xs-12 col-sm-4 emphasis'>
                <button type = 'button' class='btn btn-info btn-block' data-toggle='modal' data-target='#myModal_$id' name = 'viewprofile[$id]' id= 'view_profile'><span class='fa fa-user'></span> View Profile </button>
            </div>
        </div>
     </div>                 
    </div>
</div>

// 用于在接受之前选择我想要自动裁剪图像的图片的模式

<form id='updatedogprofileform_$id' method = 'post' enctype = 'multipart/form-data'>
                <div class='container-fluid'>
                    <div class='row'>
                    <div class='col-xs-12'>
                         <div id='updatedogpic_$id' class='modal fade'>
                <div class='modal-dialog'>
                  <div class='modal-content'>
                      <div id='header' class='modal-header'>
                      <button class='close' data-dismiss='modal'>&times;</button>
                          <h4><strong> Update picture:</strong></h4>
                      </div>
                       <div class='modal-body'>
                           <div id = 'updatedogpicmessage_$id'></div>
                           <div><img  id = 'dogprofilepic_$id' name = 'dogprofilepic[$id]' class = 'preview2' src='profilepicture/dummy.png'/></div>
                           <div class='form-group'>
                  <label for = 'dogpicture'>Select Picture</label>
                  <input type='file' name='dogpicture[$id]' id = 'dogpicture'>
                   </div>
                       <br>
                   </div>

                       <div class='modal-footer'>
                           <button class='btn green' name = 'updatedogprofilebutton[$id]' id = 'updatedogprofilebutton'>
                          Submit
                          </button>
                          <button class='btn btn-default' data-dismiss='modal'>
                          Cancel
                          </button>
                      </div>
                    </div>      
              </div>
                </div>          
                        </div>
            </form>";

// 选择后在模态中显示图像的代码

var file;
var imageType;
var buttonname;
var dogid;
$(document).on("change","#dogpicture",function(){
    file = this.files[0];
    buttonname =  ($(this).attr('name'));
    dogid = buttonname.split("[");
    dogid = dogid[1].split("]");
    dogid = dogid[0];
    imageType = file.type;
    imageSize = file.size;
    var match= ["image/jpeg","image/png","image/jpg"];
    if($.inArray(imageType, match) == -1){
        $("#updatedogpicmessage_"+dogid).html("<div class='alert alert-danger'>Wrong file format!</div>");
        return false;
    }
    if(imageSize > 3*1024*1024)
    {
        $("#updatedogpicmessage_"+dogid).html("<div class='alert alert-danger'>File too big!</div>");
        return false;
    }
        var reader = new FileReader();
        reader.onload = updatePreview;
        reader.readAsDataURL(this.files[0]);
})


   function updatePreview(event)
{
    console.log("#dogprofilepic_"+dogid);
    $("#dogprofilepic_"+dogid).attr("src",event.target.result);
}

标签： javascriptphpjquerycss