基于vue的图片剪裁工具vue-croppe

安装

// npm安装
npm install --save vue-croppa
// yarn 安装
yarn add vue-croppa

使用

引入插件

两种引用方式

// 全局注册 main.js
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)// 组件内单独使用 userAvatar.vue
import { VueCropper } from 'vue-cropper'

上传按钮

自定义样式的一个头像上传按钮，可以按需要修改

// editCropper() 打开上传模态框
<div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>

效果：

剪裁图片弹框

根据项目需要添加了自定义样式，可以按需要修改

<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"  @close="closeDialog()"><el-row><el-col :xs="24" :md="12" :style="{height: '350px'}"><vue-cropperref="cropper":img="options.img":info="true":autoCrop="options.autoCrop":autoCropWidth="options.autoCropWidth":autoCropHeight="options.autoCropHeight":fixedBox="options.fixedBox"@realTime="realTime"v-if="visible"/></el-col><el-col :xs="24" :md="12" :style="{height: '350px'}"><div class="avatar-upload-preview"><img :src="previews.url" :style="previews.img" /></div></el-col></el-row><br /><el-row><el-col :lg="2" :md="2"><el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload"><el-button size="small">选择<i class="el-icon-upload el-icon--right"></i></el-button></el-upload></el-col><el-col :lg="{span: 1, offset: 2}" :md="2"><el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button></el-col><el-col :lg="{span: 1, offset: 1}" :md="2"><el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button></el-col><el-col :lg="{span: 1, offset: 1}" :md="2"><el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button></el-col><el-col :lg="{span: 1, offset: 1}" :md="2"><el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button></el-col><el-col :lg="{span: 2, offset: 6}" :md="2"><el-button type="primary" size="small" @click="uploadImg()">提 交</el-button></el-col></el-row></el-dialog>

效果：

下面是完整代码，包含css及上传api接口

<template><div><div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div><el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"  @close="closeDialog()"><el-row><el-col :xs="24" :md="12" :style="{height: '350px'}"><vue-cropperref="cropper":img="options.img":info="true":autoCrop="options.autoCrop":autoCropWidth="options.autoCropWidth":autoCropHeight="options.autoCropHeight":fixedBox="options.fixedBox"@realTime="realTime"v-if="visible"/></el-col><el-col :xs="24" :md="12" :style="{height: '350px'}"><div class="avatar-upload-preview"><img :src="previews.url" :style="previews.img" /></div></el-col></el-row><br /><el-row><el-col :lg="2" :md="2"><el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload"><el-button size="small">选择<i class="el-icon-upload el-icon--right"></i></el-button></el-upload></el-col><el-col :lg="{span: 1, offset: 2}" :md="2"><el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button></el-col><el-col :lg="{span: 1, offset: 1}" :md="2"><el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button></el-col><el-col :lg="{span: 1, offset: 1}" :md="2"><el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button></el-col><el-col :lg="{span: 1, offset: 1}" :md="2"><el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button></el-col><el-col :lg="{span: 2, offset: 6}" :md="2"><el-button type="primary" size="small" @click="uploadImg()">提 交</el-button></el-col></el-row></el-dialog></div>
</template><script>
import store from '@/store'
import { VueCropper } from 'vue-cropper'
import { postUploadImg } from '@/api/common' //  封装的上传api接口export default {components: { VueCropper },props: {user: {type: Object}},data () {return {// 是否显示弹出层open: false,// 是否显示croppervisible: false,// 弹出层标题title: '修改头像',options: {img: '', // 裁剪图片的地址info: true, // 裁剪框的大小信息outputSize: 0.8, // 裁剪生成图片的质量outputType: 'jpeg', // 裁剪生成图片的格式canScale: false, // 图片是否允许滚轮缩放autoCrop: true, // 是否默认生成截图框// autoCropWidth: 300, // 默认生成截图框宽度// autoCropHeight: 200, // 默认生成截图框高度fixedBox: true, // 固定截图框大小 不允许改变fixed: true, // 是否开启截图框宽高固定比例fixedNumber: [7, 5], // 截图框的宽高比例full: true, // 是否输出原图比例的截图canMoveBox: false, // 截图框能否拖动original: false, // 上传图片按照原始比例渲染centerBox: false, // 截图框是否被限制在图片里面infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高},previews: {}}},mounted () {console.log(this.user)},methods: {// 编辑头像editCropper () {this.open = true},// 打开弹出层结束时的回调modalOpened () {this.visible = true},// 覆盖默认的上传行为requestUpload () {},// 向左旋转rotateLeft () {this.$refs.cropper.rotateLeft()},// 向右旋转rotateRight () {this.$refs.cropper.rotateRight()},// 图片缩放changeScale (num) {num = num || 1this.$refs.cropper.changeScale(num)},// 上传预处理beforeUpload (file) {if (file.type.indexOf('image/') === -1) {this.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。')} else {const reader = new FileReader()reader.readAsDataURL(file)reader.onload = () => {this.options.img = reader.result}}},// 上传图片uploadImg () {this.$refs.cropper.getCropBlob(data => {const formData = new FormData()formData.append('file', data)// postUploadImg 封装的上传api接口postUploadImg(formData).then(async (response) => {this.open = falsethis.options.img = response.url // 绑定接口返回urlthis.visible = false})})},// 实时预览realTime (data) {this.previews = data},// 关闭窗口closeDialog () {this.visible = false}}
}
</script>
<style scoped lang="scss">
.user-info-head {position: relative;display: inline-block;height: 120px;
}.user-info-head:hover:after {content: '+';position: absolute;left: 0;right: 0;top: 0;bottom: 0;color: #eee;background: rgba(0, 0, 0, 0.5);font-size: 24px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;cursor: pointer;line-height: 110px;border-radius: 50%;
}
.img-circle {border-radius: 50%;
}.img-lg {width: 120px;height: 120px;
}
.avatar-upload-preview {position: absolute;top: 50%;transform: translate(50%, -50%);width: 200px;height: 200px;border-radius: 50%;box-shadow: 0 0 4px #ccc;overflow: hidden;
}
</style>

更多文章__> >> 码砖猿的技术博客

基于vue的图片剪裁工具vue-croppe相关推荐

基于canvas的图片剪裁工具
工具下载地址:https://github.com/zforler/clip 直接再浏览器中打开index.html即可(基于canvas的图片操作,在谷歌浏览器中会受到同源策略的限制,放到服务容器里 ...
阿里的图片剪裁工具类及依赖的jar包
阿里的图片剪裁工具类包含以下7个方法,这都好理解,关键是这个jar包的maven依赖不好找,有人卖这个依赖已经卖到50个下载币,黑心啊,我找了很久终于找到了. 1.按固定长宽进行缩放 2.按固定文件大 ...
html 图片剪裁工具_HTML5图像裁剪工具
html 图片剪裁工具 HTML5 image crop tool I have prepared new great HTML5 tool for you (with tutorial). I ha ...
移动端图片剪裁工具cropperjs
第三方依赖:cropperjs 适用于原生js,jquery,vue及其他框架. 下载: npm install cropperjs 引入css及js: import 'cropperjs/dist/ ...
vue v-html图片chubu,「Vue」v-html生成的图片大小无法调整的解决办法
SQL 映射的 XML 文件 MyBatis 真正的力量是在映射语句中.这里是奇迹发生的地方. 对于所有的力量, SQL映射的 XML 文件是相当的简单.当然如果你将它们和对等功能的 JDBC 代码来 ...
实用前端标注图片剪裁工具-AILabel.js
AILabel类库是一款集打点.线段.多段线.矩形.多边形.圆圈.涂抹等多标注形式于一体,附加文本(Text).标记(Marker).缩略图(EagleMap).Scale(比例尺)等控件以及Util ...
史上最全基于vue的图片裁剪vue-cropper使用
史上最全基于vue的图片裁剪vue-cropper使用基于vue的图片裁剪vue-cropper 新的需求 vue-cropper官网代码拷贝最后基于vue的图片裁剪vue-cropper 最 ...
vue之使用Cropper进行图片剪裁上传压缩
vue之使用Cropper进行图片剪裁上传在项目中,对上传的图片按照比例和尺寸进行裁剪,以便于应用到不同的场景和平台上.这里采用cropper插件裁剪图片一.cropper的使用使用教程:htt ...
vue项目使用cropperjs制作图片剪裁，压缩组件
1.需求:制作一个vue版本的图片剪裁组件,并将剪裁的图片返回 2.思路:使用cropperjs制作一个剪裁组件 3.实现: 引入依赖 npm install cropperjs 引入到页面 impo ...

基于vue的图片剪裁工具vue-croppe

基于vue的图片剪裁工具vue-croppe

安装

使用

基于vue的图片剪裁工具vue-croppe相关推荐

最新文章

热门文章