vue图片处理插件,vue 图片组件
这篇文章主要给大家介绍了关于某视频剪辑软件图片裁剪组件的相关资料，本文介绍的组件是基于武埃-克罗珀二次封装，vue-cropper大家应该都很熟悉了吧，需要的朋友可以参考下
示例：
tip: 该组件基于武埃-克罗珀二次封装
安装插件
安装武埃-克罗珀
纱线添加剪切机
写入封装的组件
！-简易图片裁剪组件-二次封装-
！-更多API https://github.com/xyxiao001/vue-cropper-
！-使用：传入图片比例显示隐藏。方法：监听底部按钮点击即可-更多小道具查询文档自行添加-
模板
div v-if= value :value= value @ input= val=$ emit( input ，val) class=conbox
div class=info
vueCropper
"庄稼"
:img=img
:outputSize=outputSize
:outputType=outputType
:info=info
:canScale=canScale
:autoCrop=autoCrop
:fixed=fixed
：固定号码=固定号码
:full=full
:fixedBox=fixedBox
:canMove=canMove
:canMoveBox=canMoveBox
：原始=原始
:centerBox=centerBox
:infoTrue=infoTrue
:mode=mode
/vueCropper
/div
div class=btns
div @ click= clickCancelCut class= cancel 取消/div
img @click=clickRotate src=././资产/天堂/旋转。png alt= /
div @click=clickOk class=okey 确定/div
/div
/div
/模板
脚本
从“vue-cropper”导入{ vue cropper }；
导出默认值{
名称：图片裁剪，
组件：{ VueCropper }，
道具：{
值：{
类型：布尔型，
默认值：假的，
},
//裁剪图片的地址
img: {
类型：字符串，
默认值： ,
},
//截图框的宽高比例
固定号码：{
类型：数组，
默认值：()={
return [1，1]；
},
},
},
data() {
返回{
//裁剪组件的基础配置选择权
//img: this.img，//裁剪图片的地址
outputSize: 1，//裁剪生成图片的质量
outputType: jpeg ，//裁剪生成图片的格式
info: true，//裁剪框的大小信息
canScale: true，//图片是否允许滚轮缩放
autoCrop: true，//是否默认生成截图框
//autoCropWidth: 300，//默认生成截图框宽度
//自动裁剪：200，//默认生成截图框高度
fixed: true，//是否开启截图框宽高固定比例
//fixedNumber: this.fixedNumber，//截图框的宽高比例
full: true，//是否输出原图比例的截图
fixedBox: true，//固定截图框大小不允许改变
canMove: true，//上传图片是否可以移动
canMoveBox: true，//截图框能否拖动
原文：假，//上传图片按照原始比例渲染
centerBox: true，//截图框是否被限制在图片里面
//高：真，//是否按照设备的项目文件输出等比例图片
infoTrue: true，//true为展示真实输出图片宽高错误的展示看到的截图框宽高
//maxImgSize: 2000，//限制图片最大宽度和高度
//放大：1,//图片根据截图框输出比例倍数
模式："包含",//图片默认渲染方式
};
},
已计算：{},
观察：{},
//生命周期-创建完成（访问当前这实例)
已创建(){},
//生命周期-挂载完成（访问数字正射影像图元素)
已安装(){},
方法：{
单击CancelCut() {
这个发出( clickCancelCut ，点击取消);
这个参考文献。克罗珀。停止裁剪()；
这个参考文献。克罗珀。清除作物()；
},
单击旋转(){
这个参考文献。克罗珀。rotator right()；
这个发出( clickRotate ，点击旋转);
},
单击确定(){
//输出裁剪的base64
这个参考文献。克罗珀。获取作物数据(数据={
这个$emit(clickOk )，数据);
这个参考文献。克罗珀。停止裁剪()；
这个参考文献。克罗珀。清除crop()；
});
},
},
};
/脚本
style lang=less 范围
/* @ import URL()；引入钢性铸铁类*/。对话框{
位置：固定；
top:0；
右：0;
底部：0;
左：0;
框大小：边框-框；
身高：100vh
宽度：100%;
背景色：# 000;
显示器：flex
伸缩方向：列；
对齐-内容：居中；信息{
宽度：自动；
高度：800像素。vue-cropper {
背景-图像：无；
背景色：# 000;
}
}。btns {
填充：0 20像素
颜色：# fff
文本对齐：居中；
显示器：flex
justify-content:space-between；
对齐-项目：居中；
位置：绝对；
左：0;
右：0;
底部：15px
img {
宽度：85像素
身高：85像素
}。取消{
背景色：# 606465;
填充：15像素20像素
宽度：100像素
边框半径：10px
}。好的
背景色：# df6457
填充：15像素20像素
宽度：100像素
边框半径：10px
}
}
}
/风格
总结
到此这篇关于某视频剪辑软件图片裁剪组件的文章就介绍到这了，更多相关某视频剪辑软件图片裁剪组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。