js 图片截取插件

 

cropit----链接

 

<!DOCTYPE html>
<html>
  <head>
    <title>cropit</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="../dist/jquery.cropit.js"></script>

    <style>
      .cropit-preview {
        background-color: #f8f8f8;
        background-size: cover;
        border: 5px solid #ccc;
        border-radius: 3px;
        margin-top: 7px;
        width: 250px;
        height: 250px;
      }

      .cropit-preview-image-container {
        cursor: move;
      }

      .cropit-preview-background {
        opacity: .2;
        cursor: auto;
      }

      .image-size-label {
        margin-top: 10px;
      }

      input, .export {
        /* Use relative position to prevent from being covered by image background */
        position: relative;
        z-index: 10;
        display: block;
      }

      button {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div class="image-editor">
      <input type="file" class="cropit-image-input">
      <div class="cropit-preview"></div>
      <input type="range" class="cropit-image-zoom-input">
      <button class="export">Export</button>
    </div>

    <script>
      $(function() {
        $('.image-editor').cropit({
//            图片放大系数，系数越小放大越大，系数越大放大越小
          exportZoom: 1,
//            是否显示图片放大后的整张背景
          imageBackground: true,
          imageBackgroundBorderWidth: 0,
        });

        $('.export').click(function() {
          var imageData = $('.image-editor').cropit('export');
          console.log(imageData)
//          window.open(imageData);
        });
      });
    </script>
  </body>
</html>

　　

posted @ 2017-09-19 13:36  不正经的CodeMonkey  阅读(2004)  评论(0)    收藏  举报