vue图片处理插件,vue截图插件
这篇文章主要为大家详细介绍了某视频剪辑软件利用插件实现按比例切割图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件利用插件实现按比例切割图片的具体代码，供大家参考，具体内容如下
1.使用插件——vueCropper
安装该插件：npm install vue-cropper结合埃尔元件的上传组件
2.示例：
主页面
data(){
返回{
表单数据：{
currentBannerImg:" "
},
isShowCropper:假的，
}
}
埃尔-上传
class=头像上传者
list-type=图片卡
操作=
接受=。jpg，1000 .jpeg，1000 .巴布亚新几内亚
:with-credentials=true
:on-change=fileChangeBanner
：自动上传=假
:show-file-list=false
div class=imgBoX
img class= banner img v-if= formdata。当前横幅img title=点击更换：src= formdata。当前横幅广告 alt= /
删除表单数据.当前横幅img title=删除/i
我v-if=！slot= default class= El-icon-plus /I
/div
div slot= tip class= El-upload _ _ tip 只能上传jpg、jpeg、png且单个文件不超过10米/格
/El-上传
//上传图片，成功后调裁剪
异步文件更改横幅(文件，文件列表){
const文件类型=文件。姓名。子串(文件。姓名。lastindexof( . ) 1);
const fileTypeArr=[jpg ， jpeg ， png ， jpg ， JPEG ， PNG ]；
if(文件类型arr。(文件类型)0的索引){
这个$alert(请上传格式为jpg、jpeg、png的图片!, 系统提示, {
confirmButtonText:确定
});
文件列表。拼接(文件列表。长度-1)；
返回；
}
//大小限制
const islt 2m=文件。尺码/1024/1024这个.$ FileSize
如果(!isLt2M) {
这个. alert(` 1上传文件大小不能超过$ {这个$FileSize}MB！`, 系统提示, {
confirmButtonText:确定
});
文件列表。拼接(文件列表。长度-1)；
返回；
}
//添加裁剪部分
this.isShowCropper=true
这个. nextTick(()={
这个. refs.vueCropperDialog.open(文件);
});
},
vueCropperDialog作为组件被引入
vuecopperdialog @ cuti menter= cuti menter v-if= is show cropper ref= vuecopperdialog /vuecopperdialog
vueCropperDialog.vue
！- -
模板
！- vueCropper剪裁图片实现-
el-dialog title=图片剪裁：visible.sync=dialogVisible 附加到正文
裁剪者-内容
cropper style= text-align:center
vueCropper
"庄稼"
:img=option.img
:outputSize=option.size
:outputType=option.outputType
:info=true
:full=option.full
:canMove=option.canMove
:canMoveBox=option.canMoveBox
:original=option.original
:autoCrop=option.autoCrop
:fixed=option.fixed
:fixed number=选项。固定数量
:centerBox=option.centerBox
:infoTrue=option.infoTrue
:fixedBox=option.fixedBox
/vueCropper
/div
/div
div slot= footer class=对话框-页脚BTN框
差异
El-button icon= El-icon-refresh-left @ click= turleftorright( left )左旋转/el-button
El-button icon= El-icon-refresh-right @ click= turleftorright( right )右旋转/el-button
/div
差异
El-button @ click=对话框可见=假取消/el-button
El-button type= primary @ click= finish :loading= loading 确认/el-button
/div
/div
/el-dialog
/模板
脚本
导出默认值{
data() {
返回{
文件信息：,
dialogVisible: false，
//裁剪组件的基础配置选择权
选项：{
img: ，//裁剪图片的地址
info: true，//裁剪框的大小信息
输出大小：0.8,//裁剪生成图片的质量
outputType: jpeg ，//裁剪生成图片的格式
canScale: false，//图片是否允许滚轮缩放
autoCrop: true，//是否默认生成截图框
//autoCropWidth: 563，//默认生成截图框宽度
//自动裁剪：387，//默认生成截图框高度
fixedBox: true，//固定截图框大小不允许改变
fixed: true，//是否开启截图框宽高固定比例
固定号码：[1.45，1]，//截图框的宽高比例
full: true，//是否输出原图比例的截图
canMoveBox: false，//截图框能否拖动
原文：假，//上传图片按照原始比例渲染
中心框：false，//截图框是否被限制在图片里面
infoTrue: true //true为展示真实输出图片宽高错误的展示看到的截图框宽高
},
图片列表：[],//页面显示的数组
//防止重复提交
加载：假
};
},
方法：{
打开（文件){
this.fileinfo=file
这个。选项。img=文件。网址；
this.dialogVisible=true
},
blob到文件(blob，文件){
常量文件=新窗口. File([theBlob]，file.name，{ type:the blob。type })；
返回文件；
},
//左旋转
左转右转（类型){
if (type==left) {
这个参考文献。克罗珀。rotate left()；
}否则{
这个参考文献。克罗珀。rotator right()；
}
},
//点击裁剪，这一步是可以拿到处理后的地址
完成(){
这个参考文献。克罗珀。getcropblob((data)={
this.loading=true
const changeFile=this。blob tofile(数据，this。fileinfo)；
const fielUrl=window .URL.createObjectURL(数据);
//裁剪成功后的回调
这个. emit( cutimenter ，changeFile，fielUrl)；
this.loading=false
this.dialogVisible=false
});
}
}
};
/脚本
样式lang=scss 范围
//截图。裁剪者-内容{。收割者
宽度：自动；
高度：300像素
}
}。btnBox {
显示器：flex
对齐-项目：居中；
justify-content:space-between；
}
/风格
3.效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。