vue cropper,vuecropper文档
这篇文章主要为大家详细介绍了武埃-克罗珀实现裁剪图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了武埃-克罗珀实现裁剪图片的具体代码，供大家参考，具体内容如下
先展示一下效果
如何使用：
1、安装
新公共管理安装vue-cropper //(如果安装不上，用cnpm)
2、直接贴代码爽快人就是这样
模板
埃尔对话
title=裁剪图片
:visible.sync=visible
@close=onCallback(false)
class=handleDialog
宽度= 1000像素
div class=wrap
div class=main
div class=cropperContent
div class=cropper
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
:自动裁剪宽度=选项。自动裁剪宽度
:auto crophth=选项。“自动裁剪”
:fixedBox=option.fixedBox
@realTime=realTime
@imgLoad=imgLoad
/vueCropper
/div
div class=previewBox
div class=title 实时预览/div
差异
显示预览
:style={
宽度：previews.w 像素，
高度：previews.h px ，
}
div:style=预览预览
img:src=预览。 URL :style=预览。img /
/div
/div
/div
/div
div class=footerButton
div class=scopeButton
将class=localButton 标记为=上传本地图片/标签
投入
type=file
id=上传
class=inputFile
accept=image/png，image/jpeg，image/gif，image/jpg
@change=uploadImg($event)
/
埃尔按钮
type=primary
@click=changeScale(1)
icon=el-icon-plus
/el-button
埃尔按钮
type=primary
@click=changeScale(-1)
icon=el-icon-minus
/el-button
埃尔按钮
type=primary
@click=rotateLeft
icon=el-icon-refresh-left
/el-button
埃尔按钮
type=primary
@click=rotateRight
icon=el-icon-refresh-right
/el-button
/div
div class=uploadButton
埃尔按钮
@click=down(blob )
type=primary
icon= El-icon-下载
下载/el-button
埃尔按钮
@click=uploadNewPic
type=primary
icon=el-icon-upload2
上传/el-button
/div
/div
/div
div class=end
El-button type= primary @ click= save new pic 保存/el-button
El-button @ click= onCallback(false)取消/el-button
/div
/div
/el-dialog
/模板
脚本
从“vue-cropper”导入{ vue cropper }；
从"服务"导入{ imgView，imgUploadUrl，上传img }；
从" js/yydjs.js "导入{通知}；
导出默认值{
组件：{ VueCropper }，
data() {
返回{
imgView，
picId: ，
newPicId: ，
废话：假的，
预览：{},
选项：{
img: ，
尺寸：1,
full: false，//输出原图比例截图小道具名全部
输出类型： png ，
可以移动：没错，
原文：假，
canMoveBox: false，
自动裁剪：没错，
自动裁剪宽度：300,
自养体重：300,
固定框：没错，
},
向下移动："#",
凯特："",
比例：1,
};
},
已安装(){
这个。选项。img=这个。img查看此。picid
这个。选项。auto crophth=this。选项。自动裁剪宽度*这个。比率；
},
方法：{
saveNewPic() {
如果(!this.newPicId) {
返回警报(请上传裁剪后的图片);
}
这个。oncallback(这个。newpicid)；
},
变更比例（数量){
num=num 1；
这个参考文献。克罗珀。更改比例(数字)；
},
rotateLeft() {
这个参考文献。克罗珀。rotate left()；
},
向右旋转(){
这个参考文献。克罗珀。rotator right()；
},
//实时预览函数
实时（数据){
console.log(数据，"实时");
this.previews=数据
},
//将base64转换为文件百度随便找的看需求使用
数据文件(数据URL，文件名){
var arr=dataurl.split(，)，
mime=arr[0].匹配(/:(。*?);/)[1],
bstr=atob(arr[1])，
n=bstr。长度，
u8arr=新的uint 8数组(n)；
while (n - ) {
u8arr[n]=bstr。charcodeat(n)；
}
返回新文件([u8arr]，文件名，{ type:mime })；
},
uploadNewPic() {
这个参考文献。克罗珀。获取作物数据((数据)={
字母名称=新日期()。getTime()；
让文件=这个。dataurltofile(data，` $ { name }。png `)；
console.log(文件，‘SSSS’)；
设FD=new FormData()；
fd.append(file ，file)；
fd.append(cate ，this。cate)；
上传(fd).然后((res)={
if (res) {
设{ scalererelativepath= }=RES . body；
这个。new picid=scalererelativepath
警报(上传成功，成功);//自己写的弹框
}
});
});
},
向下（类型){
//event.preventDefault()
var aLink=文档。createelement( a )；
阿林克。download= author-img ；
//输出
if (type===blob) {
这个参考文献。克罗珀。getcropblob((data)={
console.log(数据，类型);
this.downImg=window .URL.createObjectURL(数据);
//alink。下载=这个。down img
控制台。日志(这个。down img)；
aLink.href=window .URL.createObjectURL(数据);
阿林克。单击()；
});
}否则{
这个参考文献。克罗珀。获取作物数据((数据)={
this.downImg=data
aLink.href=data
阿林克。单击()；
});
}
},
上传(e) {
//上传图片
//this.option.img
var file=e . target。文件[0]；
如果(!/\.(GIF jpg JPEG PNG BMP GIF JPG PNG)$/.测试（目标值)){
警报(图片类型必须是gif，jpeg，jpg，png，bmp。中的一种);
返回错误的
}
var reader=new FileReader()；
reader.onload=(e)={
让数据；
如果(e .目标的类型。result=== object ){
//把数组缓冲器转化为一滴如果是base64不需要
数据=窗口URL.createObjectURL(新斑点([例如目标。结果])；
}否则{
数据=e .目标。结果；
}
这个。选项。img=数据；
};
//转化为base64
//reader.readAsDataURL(文件)
//转化为一滴
reader.readAsArrayBuffer(文件);
},
imgLoad(消息){
console.log(msg， msg )；
},
},
};
/脚本
样式lang=scss 范围
@ import ~ CSS/public。scss’；handleDialog {
@ include cententCenterDialog。裁剪内容{
显示器：flex
justify-content:space-between；
左填充：20px。收割者
宽度：400像素
高度：400像素
边框：1px固体# ddd
}。预览框{
flex:1；
显示器：flex
对齐-内容：居中；
伸缩方向：列；
对齐-项目：居中；标题{
字体大小：18px
高度：36px
边距-底部：20px
}。显示预览{
flex:1；
显示器：flex
对齐-内容：居中；预览{
溢出：隐藏；
背景：# eeeeee
边框：1px纯色#咿咿
}
}
}
}。页脚按钮{
边距-顶部：30px
左边距：20px
显示器：flex
justify-content:flex-end；范围按钮{
宽度：400像素
显示器：flex
justify-content:space-between；
}。上传按钮{
flex:1；
显示器：flex
对齐-内容：居中；
}。localButton {
光标：指针；
颜色：# ffffff
背景：# 409eff
填充：10px 15px
边框半径：3px
外观：无；
显示器：flex
自我对齐：居中；
右边距：10px
}。输入文件{
宽度：180像素
位置：绝对；
clip:rect(0 0 0 0)；
}
}
}
/风格
3、说明，支持网络图片也支持本地图片，图片如果需要上传，我是通过base64转文件，再上传的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。