vue-cropperjs,vue cropper
这篇文章主要为大家详细介绍了某视频剪辑软件使用武埃-克罗珀实现图片裁剪，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前言
这两天想给图片添加一个图片裁剪的功能，因为之前的图片都是直接上传的，很多图片肯定在前台显示的时候，都不能很好的达到我们想要的效果，因此就需要我们在对个别图片进行细微调整，已达到我们的目的。
图片裁剪
关于图片裁剪我在开源代码库中找到了两种
呜呜呜图像-裁剪-上传这两种的样式分别如下所示：
首先是vue-图像-裁剪-上传，我们能够发现其实这个截图有点类似于我们需要裁减头像的时候，才需要使用的，而针对于特定的矩形，可能没办法达到我们的效果
其次我们再看武埃-克罗珀图片裁剪，它是可以根据我们的实际需求进行裁剪，所以综上可能下面这块比较适合现在的项目需求，但是我们也可以使用上面的这款作为头像裁剪的组件。
裁剪后的效果：
引入武埃-克罗珀
安装依赖
新公共管理安装vue-cropper -保存
页面引入
从“vue-cropper”导入VueCropper
申明组件
组件：{
VueCropper，
},
完整代码
！-裁剪图片-
模板
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 "
氘自动生成截图框固定比例宽：高=4 : 3/h2
测试
vueCropper ref=cropper2
:img=example2.img
:outputSize=example2.size
:输出类型=示例2。输出类型
:info=example2.info
:canScale=example2.canScale
:autoCrop=example2.autoCrop
:自动裁剪宽度=示例2。自动裁剪宽度
:自动裁剪=示例2。“自动裁剪”
:fixed=example2.fixed
:定数=例2。固定数量
：放大=4/vueCropper
/div
为="上传2"标注class="BTN "上传/标签
“输入类型=“文件”id=“上载2”style=“位置：绝对；”clip:rect(0 0 0 0)；
accept=image/png，image/jpeg，image/gif，image/jpg @ change= upload img($ event，2)
按钮@ click=完成2() class= BTN 裁剪/按钮
/div
/div
/div
/模板
脚本
从“vue-cropper”导入VueCropper
//从“阿里-oss”导入*作为OSS
导出默认值{
组件：{
VueCropper，
},
data() {
返回{
型号：假的，
型号Src: ，
废话：假的，
预览：{},
表单：{
标题：""
},
示例2: {
//img的路径自行修改
img: $oss.url \/\ form.head ，
信息：真实，
尺寸：1,
输出类型：“JPEG”，
坎斯卡：没错，
自动裁剪：没错，
//只有自动截图开启宽度高度才生效
自动裁剪宽度：300,
自养体重：250,
固定：真的，
//真实的输出宽高
信息真实：真的，
固定号码：[4,3]
},
向下图像：" # "
}
},
方法：{
//点击裁剪，这一步是可以拿到处理后的地址
finish2() {
这个参考文献。庄稼2。getcropdata((data)={
this.modelSrc=data
this.model=false
//裁剪后的图片显示
这个。例2。img=这个。型号RC；
//this.toBlob(数据)
//console.log(数据)
//console.log(this.toBlob(data))
//将图片上传服务器中
})
},
上传(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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。