cropper.js插件裁剪图片

1.先导入插件需要的依赖

2.html结构，效果如下

3.js代码

const  image  =  document.getElementById("image"); 
const cropper = new Cropper(image, {
    aspectRatio: 1,// 横纵比例
	
	//图片的预览区，即100*100 50*50那两张图片区域
    preview: $(".img-preview")
});

通过以上操作我们已经可以观察到裁剪框了，但是还无法得到裁剪下的图片， 所以还需要以下操作，当然你需要一个按钮绑定点击事件来触发裁剪这个行为

var canvas = cropper.getCroppedCanvas({ // 利用cropper的方法, 把裁剪区域输出到一个canvas标签上 // width和height是canvas标签的大小
        width: 100,
        height: 100
    });

 这里得到的canvas，如果你将他打印在页面，你会发现这就已经你刚刚通过裁剪得到的
 图片了，接下来就是将图片处理穿给后台，再渲染到你需要的地方了，比如头像

var base64Str = canvas.toDataURL("image/jpeg"); // canvas图像 -> base64字符串
    // image/jpeg 是对标签输出的base64字符串做出一个类型的标记

 // 因为base64Str有一些特殊的符号, 前端要进行URL编码, 再传给后台(node+express)会进行URL解码
    base64Str = encodeURIComponent(base64Str);