vue-cropperjs,vuecropper文档
这篇文章主要为大家介绍了某视频剪辑软件使用武埃-克罗珀裁剪图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
目录
一、安装：二、使用：三、内置方法：四、使用：总结
官网：
https://github.com/xyxiao001/vue-cropper
一、安装：
安装武埃-克罗珀
或者
纱线添加剪切机
二、使用：
从“vue-cropper”导入VueCropper
设置组件：
导出默认值{
组件：{
VueCropper
}
}
模板中插入：(外面需要套一个div，用于设置插件显示的大小)
vueCropper
"庄稼"
:img=option.img
:outputSize=option.size
:outputType=option.outputType
/vueCropper
data(){
返回{
选项：{
img: imgUrl ，//img的统一资源定位器或者base64
尺寸：1,
输出类型： png ，
}
}
}
三、内置方法：
名称
功能
默认值
可选值
图片
裁剪图片的地址
空
全球资源定位器(统一资源定位器)地址/base64/blob
输出尺寸
裁剪生成图片的质量
一
0.1 - 1
输出类型
裁剪图片的地址
jpg (jpg需要传入jpeg)
jpeg/png/web
内置方法:通过这个参考文献调用插件。
这个refs.cropper.startCrop()开始截图（如果没有设置截图框的话，通过这个启动截图框)
这个refs.cropper.stopCrop()停止截图
这个refs.cropper.clearCrop()清除截图
这个. refs.cropper.getCropData()获取截图信息（得到截图的统一资源定位器或者base64)
//获取截图的base64数据
这个参考文献。克罗珀。获取作物数据((数据)={
//做点什么
console.log(数据)
})
//获取截图的一滴数据
这个参考文献。克罗珀。getcropblob((data)={
//做点什么
console.log(数据)
})
四、使用：
模板
差异
el-dialog title=图片剪裁：可见。sync= show 附加到正文宽度= 950 px 居中
裁剪者-内容
div class=cropper-box
div class=cropper
vue-cropper ref= cropper :img=选项。 img :输出大小=选项。“输出大小”:输出类型=“选项。“输出类型”:info=“选项。 can scale :autoCrop=选项。“自动裁剪宽度”:自动裁剪高度=“选项。“自动裁剪高度”:fixed=“选项。 fixed :fixed number=选项。 full :固定框=选项。“固定盒”:罐
/vue-cropper
/div
！-底部操作工具按钮-
div class=footer-btn
div class=scope-btn
将class=btn 标记为=上传选择图片/标签
输入类型= file id= uploads style= position:absolute；clip:rect(0 0 0 0)；accept=image/png，image/jpeg，image/gif，image/jpg @ change= selectImg($ event)
El-button size= mini type= danger plain icon= El-icon-zoom-in @ click= change scale(1)放大/el-button
El-button size= mini type= danger plain icon= El-icon-zoom-out @ click= change scale(-1)缩小/el-button
El-button size=迷你 type=危险plain@click=rotateleft左旋转/el-button
El-button size=迷你 type=危险plain@click=rotateright右旋转/el-button
/div
div class=上传-btn
El-button size= mini type= success @ click= upload img( blob )上传图片我是El-icon-上传/I/El-按钮
/div
/div
/div
！-预览效果图-
div class=显示预览
div:style=预览预览
img:src=预览。 URL :style=预览。 img
/div
/div
/div
/el-dialog
/div
/模板
脚本
从“vue-cropper”导入VueCropper
导出默认值{
名称： CropperImage ，
组件：{
VueCropper
},
data () {
返回{
显示：this.visible，
名字：这个。姓名，
预览：{},
选项：{
img: ，//裁剪图片的地址
outputSize: 1，//裁剪生成图片的质量（可选0.1 - 1)
outputType: jpeg ，//裁剪生成图片的格式(jpeg png webp)
info: true，//裁剪框的大小信息，图片大小信息
canScale: true，//图片是否允许滚轮缩放
autoCrop: true，//是否默认生成截图框
自动裁剪宽度：300,//默认生成截图框宽度
自动裁剪：200，//默认生成截图框高度
fixed: true，//是否开启截图框宽高固定比例
固定号码：[1.5，1]，//截图框的宽高比例
full: true，//false按原比例裁切图片，不失真
fixedBox: true，//固定截图框大小，不允许改变
canMove: false，//上传图片是否可以移动
canMoveBox: true，//截图框能否拖动
原文：假，//上传图片按照原始比例渲染
中心框：false，//截图框是否被限制在图片里面
高度：真，//是否按照设备的项目文件输出等比例图片
infoTrue: false，//true为展示真实输出图片宽高，假的展示看到的截图框宽高
maxImgSize: 3000，//限制图片最大宽度和高度
放大：1,//图片根据截图框输出比例倍数
模式： 230像素150像素//图片默认渲染方式
}
};
},
道具：{
可见：{
类型：布尔型，
默认值：错误
},
名称：{
类型：字符串，
默认值：""
}
},
观察：{
可见(){
this.show=this。可见
}
},
方法：{
//初始化函数
imgLoad(消息){
},
//图片缩放
变更比例（数量){
num=num 1
这个refs.cropper.changeScale(num)
},
//向左旋转
rotateLeft () {
这个refs.cropper.rotateLeft()
},
//向右旋转
向右旋转(){
这个参考文献。克罗珀。向右旋转()
},
//实时预览函数
实时（数据){
this.previews=数据
},
//选择图片
选择(e) {
let file=e.target.files[0]
如果(!/\.(jpgjpegpngJPGPNG)$/.测试（目标值)){
这个消息({
消息： 图片类型要求：jpeg、jpg、png ，
类型："错误"
});
返回错误的
}
//转化为一滴
let reader=new FileReader()
reader.onload=(e)={
让数据
如果(e .目标的类型。result=== object ){
数据=窗口URL.createObjectURL(新Blob([e.target.result]))
}否则{
数据=e。目标。结果
}
this.option.img=data
}
//转化为base64
reader.readAsDataURL(文件)
},
//上传图片
上传（类型){
让这个=这个
if (type===blob) {
//获取截图的一滴数据
这个参考文献。克罗珀。getcropblob(async(data)={
let formData=new formData()；
formData.append(file ，Data，new Date().getTime() .png’)
//调用爱可信上传
让{ data: res }=await _this .$ http。post(` $ { msbase URL } common-tools-web/file/upload/image ` formData)
if (res.code===200) {
_这个消息({
消息：res.desc，
类型："成功"
});
假设数据=结果
let imgInfo={
名称：data.name，
id: data.id，
url: data.url
};
_这个. emit(uploadImgSuccess ，imgInfo)；
}否则{
_这个消息({
消息： 文件服务异常，请联系管理员!,
类型："错误"
})
}
})
}
}
}
}
/脚本
样式范围语言=少。裁剪者-内容{
显示器：flex
显示：-WebKit-flex；
justify-content:flex-end；收割箱{
flex:1；
宽度：100%;收割者
宽度：自动；
高度：300像素
}
}。显示-预览{
flex:1；
-WebKit-flex:1；
显示器：flex
显示：-WebKit-flex；
对齐-内容：居中；预览{
溢出：隐藏；
边框：1px纯色# 67c23a
背景：# cccccc
}
}
}。页脚-btn {
边距-顶部：30px
显示器：flex
显示：-WebKit-flex；
justify-content:flex-end；范围-btn {
显示器：flex
显示：-WebKit-flex；
justify-content:space-between；
右填充：10px
}。上传-btn {
flex:1；
-WebKit-flex:1；
显示器：flex
显示：-WebKit-flex；
对齐-内容：居中；
}。btn {
大纲：无；
显示：内嵌-块；
行高：1;
空白：nowrap
光标：指针；
-网络工具包-外观：无；
文本对齐：居中；
-WebKit-box-sizing:border-box；
框大小：边框-框；
大纲：0;
-网络工具包-过渡：0.1秒
转场：0.1秒
字体粗细：500;
填充：8px 15px
字体大小：12px
边框半径：3px
颜色：# fff
背景色：# 409eff
边框颜色：# 409eff
右边距：10px
}
}
/风格
效果：
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。