vue+cropperjs插件,实现图片裁剪功能——PC端+移动端——技能提升
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
发现了一个图片裁剪的插件cropperjs,这个插件非常的强大,能够实现多种功能:
可以对指定的图片进行裁剪,可以自己选择裁剪的交互方式,如大小、纵横比等
还可以预览裁剪区域,确认裁剪后可以生成一个包含裁剪图的canvas对象,借助 canvas 的toDataURL 方法可以生成一张 Base64 格式的图片。
还有另外一种不使用 canvas 的方式,利用该工具丰富的 api 可以拿到裁剪区域 相对于 原图的各项数据,使用这些数据进行css绝对定位即可展示裁剪后的图,该方式可以保证图片不失真和完整。
大神使用cropperjs的链接:https://www.cnblogs.com/eightFlying/p/cropper-demo.html
cropperjs官网:https://fengyuanchen.github.io/cropper/
此篇文章只简单介绍一下等比例的裁剪功能及使用步骤。
1.安装cropperjs插件
npm install cropperjs --save-dev
安装完插件后,由于此插件并非很多页面都要用到,因此可以不在main.js主入口文件中全局引入,可以在需要使用图片裁剪功能的地方单独引入即可。
2.template部分代码
页面部分,有个原图部分+裁剪按钮+裁剪区域+裁剪后的图片部分。
<div class="before"></div>
<el-button @click="sureSava">裁剪</el-button>
<div class="container">
<div class="img-container">
<img src="@/assets/401_images/401.gif" ref="image" alt="" />
</div>
<div class="afterCropper">
<img :src="afterImg" alt="" />
</div>
</div>
3.js
部分代码
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";
export default{
data(){
return{
myCropper: null,
afterImg: "",
}
},
created(){
this.$nextTick(()=>{
this.init();
})
},
methods:{
init(){
this.myCropper = new Cropper(this.$refs.image,{
viewMode:1,
dragNode:'none',
initialAspectRatio:1,
aspectRatio:1,
preview:'.before',
background: false,
autoCropArea: 0.6,
zoomOnWheel: false
})
},
sureSava(){
this.afterImg = this.myCropper.getCroppedCanvas({
imageSmoothingQuality:'high'
}).toDataURL('image/jpeg');
}
}
}
4.css
部分
.container{
display: flex;
}
.before{
width: 100px;
height: 100px;
overflow: hidden;
/* 这个属性可以得到想要的效果 */
}
.img-container{
height: 400px;
overflow: hidden;
}
.afterCropper{
flex: 1;
margin-left: 20px;
border: 1px solid salmon;
text-align: center;
}
.afterCropper img{
width: 150px;
margin-top: 30px;
}
5.最终效果图
附录一个超级详细的使用参数说明:大神就是大神,生活中处处都是大神。
大神提供的cropperjs的参数详细说明:https://blog.csdn.net/achejq/article/details/93240104
完成!!!
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)