剪裁圆形图片cropie

<!DOCTYPE html>

<html>

  <head>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/croppie/2.6.2/croppie.js"></script>

    <link rel="Stylesheet" href="https://cdn.bootcss.com/croppie/2.6.2/croppie.css" />

    <style>

      button,

a.btn {

 background-color: #189094;

 color: white;

 padding: 10px 15px;

 border-radius: 3px;

 border: 1px solid rgba(255, 255, 255, 0.5);

 font-size: 16px;

 cursor: pointer;

 text-decoration: none;

 text-shadow: none;

}

button:focus {

 outline: 0;

} 

.file-btn {

 position: relative;

}

.file-btn input[type="file"] {

 position: absolute;

 top: 0;

 left: 0;

 width: 100%;

 height: 100%;

 opacity: 0;

} 

.actions {

 padding: 5px 0;

}

.actions button {

 margin-right: 5px;

}

.pop_main{display:none}

.pop_con{    width: 400px;

    height: 400px;

    background: #fff;

    z-index: 100;

    position: relative;}

.pop_mask{background-color: rgba(0, 0, 0, 0.5);position: absolute;

    width: 100%;

    left: 0;

    top: 0;

    bottom: 0;}

    </style>

  </head>

  <body>

    <div class="actions">

      <button class="file-btn">

       <span>上传</span>

       <input type="file" id="upload" value="选择图片文件" />

      </button> 

      <div class="pop_main">

        <div class="pop_con">

          <div> <button class="pop_close">x</button> </div>

          <div class="crop">

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

            <button class="upload-result">裁剪</button>

          </div>

        </div>

      <div class="pop_mask"></div>

      </div>

      <div id="result"></div>

     </div>

     <script>

       $(function(){

 var $uploadCrop; 

  function readFile(input) {

    if (input.files && input.files[0]) {

      console.log("file----",input.files[0])

    var reader = new FileReader(); 

    reader.onload = function (e) {

     $uploadCrop.croppie('bind', {

      url: e.target.result

     });

    } 

    reader.readAsDataURL(input.files[0]);

   }

   else {

    alert("Sorry - you're browser doesn't support the FileReader API");

   }

  } 

  $uploadCrop = $('#upload-demo').croppie({

   viewport: {

    width: 200,

    height: 200,

    type: 'circle'

   },

   boundary: {

    width: 300,

    height: 300

   }

  }); 

  $('#upload').on('change', function () {

   $(".pop_main").show();

   $(".pop_con").css({'top':0,'opacity':0})

   $(".pop_con").animate({'top':'50%','opacity':1})

   readFile(this);

  });

  $('.upload-result').on('click', function (ev) {

   $uploadCrop.croppie('result', 'canvas').then(function (resp) {

     console.log("file---2",resp)

    popupResult({

     src: resp

    });

   });

  });

  $('.pop_close').on('click',function(ev){

    $(".pop_main").hide()

    var file = $("#upload")

file.after(file.clone().val(""));

file.remove();

  })

 function popupResult(result) { 

  var html;

  if (result.html) {

   html = result.html;

  }

  if (result.src) {

   html = '<img src="' + result.src + '" />';

  }

  $("#result").html(html);

 }

});

     </script>

  </body>

</html>
巴特西

剪裁圆形图片cropie

最新文章

热门文章
