html 使用croppie jquery-plugin。上传文件，它允许您在中心使用圆圈进行平移和缩放，然后当您单击“保存”时，将裁剪c

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 使用croppie jquery-plugin。上传文件，它允许您在中心使用圆圈进行平移和缩放，然后当您单击“保存”时，将裁剪c相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Crop Circles</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/jquery.redirect/jquery.redirect.js"></script>

  <script src="bower_components/Croppie/croppie.min.js"></script>
  <link rel="stylesheet" href="bower_components/Croppie/croppie.css" />

  <script src="bower_components/boostrap/dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
</head>

<body>
<div class="container">
  <div class="page-header">
    <h1>Upload Photo <small>Crop Circle</small></h1>
  </div>
  <div class="col-md-4 center-block">
    <div id="crop"></div>
      <form id="form">
        <div class="form-group">
          <label class="btn btn-default btn-file">
            Choose File <input type="file" id="upload" style="display: none;">
          </label>
          <button type="button" class="btn btn-primary" id="save">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  $(document).ready(function() {
    var crop = $('#crop').croppie({
            viewport: {
              width: 200,
              height: 200,
              type: 'circle'
            }
        });

    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
          crop.croppie('bind', { url: e.target.result });
        }

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

    $("#upload").change(function() {
      readURL(this);
    });

    $("#save").click(function() {
      crop.croppie('result', {
        'type': 'canvas',
        'size': {'height': 100, 'width': 100},
        'circle': true}).then(function(image) {
          $.redirect('http://localhost:8000/cropcircles', {
            'image': image
          });
      });
    });
  });
</script>

</body>
</html>

以上是关于html 使用croppie jquery-plugin。上传文件，它允许您在中心使用圆圈进行平移和缩放，然后当您单击“保存”时，将裁剪c的主要内容，如果未能解决你的问题，请参考以下文章

html 使用croppie jquery-plugin。上传文件，它允许您在中心使用圆圈进行平移和缩放，然后当您单击“保存”时，将裁剪c

找不到模块：错误：无法解析“croppie”

如何使用croppie js到php使用裁剪图像并使用它？

如何添加 Croppie 结果以上传 php 并将结果传递到其他 php 页面

如何在 laravel 8 中为 vue 3 配置 Croppie？

Javascript || AWS S3 SDK &croppie 文件上传错误