vue图片处理插件,
本文主要介绍如何使用vue图像裁剪插件vue-Cropper。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享了vue图片裁剪插件vue-Cropper的使用方法，供大家参考。具体内容如下
我在网上找了很多关于vue裁剪图的文章，演示太长了，真的太长了。有些还是不能理解，最后用了一个大demo，但是在项目实践的过程中还是有一些问题没有解决。先介绍一下吧。效果如下，
在这里，我使用了4:3的固定比例进行切割，切割后的效果
但是，裁剪后的图像路径是base64，这是一个超长的路径。最终需要对地址进行处理，并传递给后端。项目使用oss对图像进行处理，最终得到一个类似aad 68 a 8 FD 577464 DBC Dead 2e9b 2084d的后缀，传递给后端。base64的路径有几万个字符，传到后端就炸了。
后来我通过oss处理，把base64的路径地址改成了通过oss解析的地址，但是！让我下载解析后的地址。下载的文件不是图像格式。记事本打开文件，它仍然是base64的路径。复制粘贴。没错，就是裁剪后的图像。这个问题还没有解决。解决后请回来修改。先附上代码。这里的代码比较完整，图像地址分析部分可以省略。
以上问题可以通过将base64转换成blob格式来解决，oss上传需要使用新的Blob格式(2019年6月22日更新)
附上其他文件。
的剪辑vue文件：(已更新)
下载npm安装vue-cropper -首先保存
！-裁剪图片-
模板
div class=wrapper
div class= model v-show= model @ click= model=false
div class=model-show
img :src=modelSrc alt=
/div
/div
div class=内容
div class=" show-info "
H2自动生成截图框固定比例w: h=4: 3/h2
测试
vue cropper ref= cropper 2 :img= example 2 . img :output size= example 2 . size :output type= example 2 . output type
:info= example 2 . info :can scale= example 2 . can scale :auto crop= example 2 . auto crop
:auto crop width= example 2 . auto crop width :auto crop height= example 2 . auto crop height :fixed= example 2 . fixed
:fixed number= example 2 . fixed number :enlarge= 4 /vue cropper
/div
Class= BTN for=上传2 上传/标签
input type= file id= upload 2 style= position:absolute； clip:rect(0 0 0 0)；
accept=image/png，image/jpeg，image/gif，image/jpg @ change= upload img($ event，2)
按钮@ click= Finish2 () class= BTN 裁剪/按钮
/div
/div
/div
/模板
脚本
从“vue-cropper”导入{ VueCropper }
从“ali-oss”导入*作为OSS；
导出默认值{
组件：{
VueCropper，
},
data() {
返回{
型号：假的，
型号Src: ，
废话：假的，
预览：{}，
表单：{
标题：“”
},
示例2: {
//img的路径是自己修改的。
img: $oss.url \/\ form.head ，
信息：真实，
尺寸：1，
output type:“JPEG”，
坎斯卡：没错，
autoCrop:没错，
//只有自动截图的宽度和高度才会生效。
自动裁剪宽度：300，
自养体重：250，
固定：真的，
//真实输出宽度和高度
infoTrue:真的，
固定号码：[4，3]
},
down img:“#”
}
},
方法：{
//点击crop，这一步就是得到处理后的地址。
finish2() {
这个。$ refs . cropper 2 . getcropdata((data)={
this.modelSrc=data
this.model=false
//显示裁剪后的图片。
this . example 2 . img=this . models RC；
//this.toBlob(数据)
//console.log(数据)
//console.log(this.toBlob(data))
//阿里云处理图片，项目的界面，可以用在这里。上面打印的地址是base64的地址。
这个。$api.admin.url(data={
新操作系统。包装({
地区：“OSS-cn-杭州”，
accessKeyId: data.accessKeyId，
accesskey secret:data . accesskey secret，
stsToken: data.securityToken
//桶： mybgc
水桶：致远赫兹
})。put(data.key，this.toBlob(this.example2.img))。然后(数据={
console.log(data.url)
})。接住(函数（错误){
console.error(error: %j ，err)；
});
});
})
},
上传(e，num) {
//上传图片
this.example2.img=
var file=e.target.files[0]
如果(!/\.(GIF jpg JPEG PNG BMP GIF JPG PNG)$/.测试（目标值)){
警报(图片类型必须是gif，jpeg，jpg，png，bmp。中的一种)
返回错误的
}
var reader=new FileReader()
reader.onload=(e)={
让数据
数据=e。目标。结果
如果(e .目标的类型。result=== object ){
//把数组缓冲器转化为一滴如果是base64不需要
数据=窗口URL.createObjectURL(新Blob([e.target.result]))
}否则{
数据=e。目标。结果
}
if (num===1) {
this.option.img=data
} else if (num===2) {
this.example2.img=data
}
}
//转化为base64
//reader.readAsDataURL(文件)
//转化为博客
reader.readAsArrayBuffer(文件)
},
//base64转一滴
toBlob(ndata) {
//ndata为base64格式地址
console.log(ndata)
让arr=ndata.split(，)，
mime=arr[0].匹配(/:(。*?);/)[1],
bstr=atob(arr[1])，
n=bstr。长度，
u8arr=新的uint 8数组(n)；
while (n - ) {
u8arr[n]=bstr。charcodeat(n)；
}
返回新的Blob([u8arr]，{
类型：哑剧
})
}
},
}
/脚本
风格
* {
边距：0;
填充：0;
}。内容{
边距：自动；
最大宽度：585像素
边距-底部：100像素
}。测试按钮{
显示器：flex
柔性包装：缠绕；
}。btn {
显示：内嵌-块；
行高：1;
空白：nowrap
光标：指针；
背景：# fff
边框：1px实心# c0ccda
颜色：# 1 f2d 3d
文本对齐：居中；
框大小：边框-框；
大纲：无；
边距：20像素10像素0像素0像素
填充：9像素15像素
字体大小：14px
边框-半径：4px
颜色：# fff
背景色：# 50bfff
边框颜色：# 50bfff
过渡：所有. 2s放松
文字-装饰：无；
用户选择：无；
}。des {
行高：30px
}
code.language-html {
填充：10px 20px
边距：10px 0px
显示：块；
背景色：# 333;
颜色：# fff
溢出-x:自动；
font-family: Consolas，Monaco，Droid，Sans，Mono，Source，Code，Pro，Menlo，Lucida，Sans，Type，Writer，Ubuntu，Mono；
边框半径：5px
空白：前
}。显示信息{
边距-底部：50px
}。显示信息h2 {
行高：50px
}
/*.标题，标题：悬停，标题-焦点，标题：已访问{
颜色：黑色；
}*/。标题{
显示：块；
文字-装饰：无；
文本对齐：居中；
行高：1.5;
边距：20px 0px
背景-图像：-网络工具包-线性-渐变（左、#3498db、#f47920 10%、#d71345 20%、#f7acbc 30%、#ffd400 40%、#3498db 50%、#f47920 60%、#d71345 70%、#f7acbc 80%、#ffd400 90%、# 3498 db)；
颜色：透明；
-网络工具包-背景-剪辑：文本；
背景尺寸：200% 100%;
动画：幻灯片5s无限线性；
字体大小：40px
}。测试{
身高：285像素
}。型号{
位置：固定；
z指数：10;
宽度：100vw
身高：100vh
溢出：自动；
top:0；
左：0;
背景：rgba(0，0，0，0.8)；
}。模特秀{
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
宽度：100vw
身高：100vh
}。模型img {
显示：块；
边距：自动；
最大宽度：80%;
用户选择：无；
背景-位置：0px 0px，10px 10px
背景-尺寸：20像素20像素
背景图像：线性梯度(45度，#eee 25%，透明25%,透明75%，#eee 75%，#eee 100%)，线性梯度(45度，#eee 25%，白色25%,白色75%，#eee 75%，# eee 100%)；
}。c项{
显示：块；
填充：10px 0；
用户选择：无；
}
@关键帧幻灯片{
0% {
背景-位置：0 0;
}
100% {
背景-位置：-100% 0;
}
}
@媒体屏幕和（最大宽度：1000像素){。内容{
最大宽度：90%;
边距：自动；
}。测试{
高度：400像素
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。