这篇博客介绍了如何利用cropperjs库进行图片裁剪。首先，通过img标签预览图片并获取blob信息。接着，详细阐述了cropperjs的安装、引入以及在Vue项目中的初始化步骤。在配置cropperjs后，博主详细讲解了服务端和客户端两种裁切方式，包括获取cropper实例和监听裁切操作事件来获取裁剪参数。
一、img预览框拿到blob图片信息
这里只有主要代码
<input type="file" hidden ref="inputFile" @change="updateImg" />
const file = this.$refs.inputFile.files[0]
// 拿到blob图片信息
this.img = window.URL.createObjectURL(file)
二、cropperjs使用
1、安装cropperjs
npm install cropperjs
2、引入css、js
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'
3、在mounted中初始化
const image = this.$refs.img
const cropper = new Cropper(image, {
aspectRatio: 
最低0.47元/天 解锁文章
650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
