Cropper.js使用笔记

官网：https://fengyuanchen.github.io/cropperjs/

github：https://github.com/fengyuanchen/cropperjs

由于文档不好看：提供另一个地址，这里面有一些简单的方法：https://blog.csdn.net/weixin_38023551/article/details/78792400

主要代码：

引入：

<link  href="cropper.css" rel="stylesheet">
<script src="cropper.js"></script>

HTML代码：

<!-- 用一个块元素(容器)包装图像或画布元素 -->
<div class="box">
  <img id="image" src="picture.jpg">
</div>
<div class="small"></div>  //这个是放小图片的

JS代码：

// 引入本地js的时候，用这个：
$("#image").cropper({
      aspectRatio: 1/1,
      viewMode: 1,
       minCropBoxWidth: 100,
        preview: ".smallImg"
 });

// 使用cdn引入Js
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);
        }
    });

 

具体的方法可以参考上面的网站

<!-- 用一个块元素(容器)包装图像或画布元素 --><div class="box"><img id="image" src="picture.jpg"></div>