cropper圖片裁剪上傳

時間 2019-11-13
標籤 cropper 圖片裁剪上傳简体版
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cropper</title>
  <link rel="stylesheet" href="./cropper/cropper.css">
  <style>
    .container {
      max-width: 960px;
    }

    img {
      max-width: 100%;
    }
  </style>
</head>
<body>
<div style="width: 100%;overflow: hidden;">
  <div class="container">
    <div>
      <img src="" id="image">
    </div>
    </div>
  </div>
</div>
  <div id="dpage" class="docs-buttons">
    <a href="javascript:void(0);">
      <input type="button" name="file" class="button" value="上傳">
      <input id="inputImage" type="file" accept="image/*" multiple  />
    </a>
    <a href="javascript:void(0);" class="qx"><button id="clipBtn" data-method="getCroppedCanvas">截取圖片</button></a>
  </div>
  <!-- Scripts -->
  <script src="./jquery/jquery-1.12.4.min.js"></script>
  <script src="./cropper/cropper.js"></script>
  <script>
    $(function () {

      'use strict';

      var console = window.console || { log: function () {} };
      var $image = $('#image');

      var options = {
        dragMode:'move'
      };





      // Cropper
      $image.cropper(options);




      // Methods
      $('.docs-buttons').on('click', '[data-method]', function () {
        var $this = $(this);
        var data = $this.data();
        var $target;
        var result;

        if ($this.prop('disabled') || $this.hasClass('disabled')) {
          return;
        }

        if ($image.data('cropper') && data.method) {
          data = $.extend({}, data); // Clone a new one

          if (typeof data.target !== 'undefined') {
            $target = $(data.target);

            if (typeof data.option === 'undefined') {
              try {
                data.option = JSON.parse($target.val());
              } catch (e) {
                console.log(e.message);
              }
            }
          }

          if (data.method === 'rotate') {
            $image.cropper('clear');
          }

          result = $image.cropper(data.method, data.option, data.secondOption);

          if (data.method === 'rotate') {
            $image.cropper('crop');
          }

          switch (data.method) {
            case 'scaleX':
            case 'scaleY':
              $(this).data('option', -data.option);
              break;

            case 'getCroppedCanvas':
              if (result) {
                var base64url = result.toDataURL('image/jpeg');
                $.post('/api/user/uploadImage',{img:base64url},function(data){
                    if(data.status){
                      console.log(data.info);
                    }
                    console.log(data.info);
                },'json');
              }

              break;
          }

          if ($.isPlainObject(result) && $target) {
            try {
              $target.val(JSON.stringify(result));
            } catch (e) {
              console.log(e.message);
            }
          }

        }
      });


      // Keyboard
      $(document.body).on('keydown', function (e) {

        if (!$image.data('cropper') || this.scrollTop > 300) {
          return;
        }

        switch (e.which) {
          case 37:
            e.preventDefault();
            $image.cropper('move', -1, 0);
            break;

          case 38:
            e.preventDefault();
            $image.cropper('move', 0, -1);
            break;

          case 39:
            e.preventDefault();
            $image.cropper('move', 1, 0);
            break;

          case 40:
            e.preventDefault();
            $image.cropper('move', 0, 1);
            break;
        }

      });


      // Import image
      var $inputImage = $('#inputImage');
      var URL = window.URL || window.webkitURL;
      var blobURL;

      if (URL) {
        $inputImage.change(function () {
          var files = this.files;
          var file;

          if (!$image.data('cropper')) {
            return;
          }

          if (files && files.length) {
            file = files[0];

            if (/^image\/\w+$/.test(file.type)) {
              blobURL = URL.createObjectURL(file);
              $image.one('built.cropper', function () {

                // Revoke when load complete
                URL.revokeObjectURL(blobURL);
              }).cropper('reset').cropper('replace', blobURL);
              $inputImage.val('');
            } else {
              window.alert('文件類型錯誤');
            }
          }
        });
      } else {
        $inputImage.prop('disabled', true).parent().addClass('disabled');
      }

    });
  </script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。