cropper.js裁剪图片的使用

2019-09-27  本文已影响0人  CNLISIYIII

官网http://fengyuanchen.github.io/cropper/
文档https://github.com/fengyuanchen/cropper/blob/master/README.md

引入js

<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>
<!-- 建议把单独的img标签放在一个div中 包裹画布-->
<div class="box">
  <img id="image" src="picture.jpg">
</div>

这里注意，直接设置img的宽高是没有效果的，但是可以在父盒子上（即.box）设置

官方引入方式
    var cropper = new Cropper(image, {
        aspectRatio: 16 / 9,
        viewMode:1,
        crop: function (e) {
            console.log(e.detail.x);
            console.log(e.detail.y);
            console.log(e.detail.width);
            console.log(e.detail.height);
            console.log(e.detail.rotate);
            console.log(e.detail.scaleX);
            console.log(e.detail.scaleY);
        }
    });
本地引入方式

如果使用的是本地的cropper.js和cropper.css，可能报版本的错误，用下面的引入代码：

    $('#image').cropper({
        aspectRatio: 16 / 9,
        viewMode:1,
        crop: function (e) {
            console.log(e);
        }
    });

参数 options

Methods 方法

$("#image").cropper({
  autoCrop: false, //关闭自动显示裁剪框
  ready: function () {
    $(this).cropper('crop');
  }
});

    $("#replace").on("click", function () {
        $('#image').cropper('replace',"./images/111.jpeg",true );
    })

$('#image').cropper('scale', -1); // 水平、垂直方向翻转
$('#image').cropper('scale', -1, 1); // 水平方向翻转
$('#image').cropper('scale', 1, -1); // 垂直方向翻转

    $("#getData").on("click", function () {
        console.log($('#image').cropper('getData', true));;
    })

    $("#getImageData").on("click", function () {
        console.log($('#image').cropper('getImageData', ));;
    })

    $("#getCroppedCanvas").on("click", function () {
        console.log($('#image').cropper('getCroppedCanvas'));;
        var cas=$('#image').cropper('getCroppedCanvas');
        var base64url=cas.toDataURL('image/jpeg');
        cas.toBlob(function (e) {
            console.log(e);  //生成Blob的图片格式
        })
        console.log(base64url); //生成base64图片的格式
        $('.cavans').html(cas)  //在body显示出canvas元素
    })

$('#image').cropper('getCroppedCanvas', {
  width: 160,
  height: 90,
  minWidth: 256,
  minHeight: 256,
  maxWidth: 4096,
  maxHeight: 4096,
  fillColor: '#fff',
  imageSmoothingEnabled: false,
  imageSmoothingQuality: 'high',
});

// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`
$('#image').cropper('getCroppedCanvas').toBlob(function (blob) {
  var formData = new FormData();
  formData.append('croppedImage', blob);
  $.ajax('/path/to/upload', {
    method: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function () {
      console.log('Upload success');
    },
    error: function () {
      console.log('Upload error');
    }
  });
});

Events事件

$('#image').on('cropstart', function (e) {
  console.log(e.type); // cropstart
  console.log(e.namespace); // cropper
  console.log(e.action); // ...
  console.log(e.originalEvent.pageX);

  // Prevent to start cropping, moving, etc if necessary
  if (e.action === 'crop') {
    e.preventDefault();
  }
});
上一篇 下一篇

猜你喜欢

热点阅读