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>