使用vue-cropper

1.安装

npm install vue-cropper

2.使用

1.main.js文件引入

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

2.封装

<template><div><el-dialogtitle="图片剪裁":visible.sync="dialogVisiblex":close-on-press-escape="false":close-on-click-modal="false"append-to-bodywidth="1000px"><div class="cropper-content"><div class="cropper" style="text-align:center"><vueCropperref="cropper":img="option.img":outputSize="option.outputSize":outputType="option.outputType":info="option.info":canScale="option.canScale":autoCrop="option.autoCrop":autoCropWidth="option.autoCropWidth":autoCropHeight="option.autoCropHeight":fixedBox="option.fixedBox":fixed="option.fixed":fixedNumber="option.fixedNumber":canMove="option.canMove":canMoveBox="option.canMoveBox":original="option.original":centerBox="option.centerBox":infoTrue="option.infoTrue":full="option.full":enlarge="option.enlarge":mode="option.mode"></vueCropper></div></div><div slot="footer" class="dialog-footer"><el-button @click="dialogVisiblex = false">取消</el-button><el-button type="primary" @click="finish" :loading="loading">确认</el-button></div></el-dialog></div>
</template><script>
export default {components: {},props: {},data() {return {dialogVisiblex: false,loading: false,option: {img: '', // 裁剪图片的地址 url 地址, base64, bloboutputSize: 1, // 裁剪生成图片的质量outputType: 'jpeg', // 裁剪生成图片的格式 jpeg, png, webpinfo: true, // 裁剪框的大小信息canScale: false, // 图片是否允许滚轮缩放autoCrop: true, // 是否默认生成截图框autoCropWidth: 345, // 默认生成截图框宽度autoCropHeight: 245, // 默认生成截图框高度fixedBox: false, // 固定截图框大小 不允许改变fixed: true, // 是否开启截图框宽高固定比例fixedNumber: [1, 1], // 截图框的宽高比例 [ 宽度 , 高度 ]canMove: true, // 上传图片是否可以移动canMoveBox: true, // 截图框能否拖动original: false, // 上传图片按照原始比例渲染centerBox: true, // 截图框是否被限制在图片里面infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高full: true, // 是否输出原图比例的截图enlarge: '1', // 图片根据截图框输出比例倍数mode: 'contain' // 图片默认渲染方式 contain , cover, 100px, 100% auto},unimgurl: '',success: () => {} // 回调方法}},computed: {},watch: {},created() {},mounted() {},activated() {},methods: {showModal(obj) {if (obj.img) {this.option.img = obj.img}//裁剪生成图片的质量if (obj.outputSize) {this.option.outputSize = obj.outputSize} else {this.option.outputSize = 1}//裁剪生成图片的格式if (obj.outputType) {this.option.outputType = obj.outputType} else {this.option.outputType = 'jpeg'}//裁剪框的大小信息if (obj.info) {this.option.info = obj.info} else {this.option.info = true}//图片是否允许滚轮缩放if (obj.canScale) {this.option.canScale = obj.canScale} else {this.option.canScale = false}//是否默认生成截图框if (obj.autoCrop) {this.option.autoCrop = obj.autoCrop} else {this.option.autoCrop = true}//默认生成截图框宽度if (obj.autoCropWidth) {this.option.autoCropWidth = obj.autoCropWidth} else {this.option.autoCropWidth = 375}//默认生成截图框高度if (obj.autoCropHeight) {this.option.autoCropHeight = obj.autoCropHeight} else {this.option.autoCropHeight = 245}//固定截图框大小 不允许改变if (obj.fixedBox) {this.option.fixedBox = obj.fixedBox} else {this.option.fixedBox = false}//是否开启截图框宽高固定比例if (obj.fixed) {this.option.fixed = obj.fixed} else {this.option.fixed = true}//截图框的宽高比例if (obj.fixedNumber) {this.option.fixedNumber = obj.fixedNumber} else {this.option.fixedNumber = [this.option.autoCropWidth, this.option.autoCropHeight]}//上传图片是否可以移动if (obj.canMove) {this.option.canMove = obj.canMove} else {this.option.canMove = true}//截图框能否拖动if (obj.canMoveBox) {this.option.canMoveBox = obj.canMoveBox} else {this.option.canMoveBox = true}//上传图片按照原始比例渲染if (obj.original) {this.option.original = obj.original} else {this.option.original = false}//截图框是否被限制在图片里面if (obj.centerBox) {this.option.centerBox = obj.centerBox} else {this.option.centerBox = true}//true 为展示真实输出图片宽高 false 展示看到的截图框宽高if (obj.infoTrue) {this.option.infoTrue = obj.infoTrue} else {this.option.infoTrue = true}//是否输出原图比例的截图if (obj.full) {this.option.full = obj.full} else {this.option.full = true}//图片根据截图框输出比例倍数if (obj.enlarge) {this.option.enlarge = obj.enlarge} else {this.option.enlarge = '1'}//图片默认渲染方式if (obj.mode) {this.option.mode = obj.mode} else {this.option.mode = 'contain'}if (obj.success) {this.success = obj.success} else {this.success = () => {}}this.dialogVisiblex = true},finish() {// 获取截图的数据let that = thisthis.$refs.cropper.getCropBlob(data => {that.unimgurl = datathat.confirm()})},confirm() {this.success({img: this.unimgurl})this.dialogVisiblex = false},cancel() {this.dialogVisiblex = false}}
}
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.real_info_class {.el-checkbox__input .el-checkbox__inner {border-radius: 0;}
}
.file-image {width: 320px;height: 320px;font-size: 14px;border: 1px solid #cccccc;margin: 15px 0;
}/* 截图 */
/* .cropper-content {} */
.cropper {width: 960px;height: 606px;
}
</style>

3.组件调用

 <x-cropper ref="iscropper"></x-cropper>

 this.$refs.iscropper.showModal({img: img, // 裁剪图片的地址outputSize: 0.8, // 裁剪生成图片的质量outputType: 'jpeg', // 裁剪生成图片的格式info: true, // 裁剪框的大小信息canScale: false, // 图片是否允许滚轮缩放autoCrop: true, // 是否默认生成截图框autoCropWidth: 375, // 默认生成截图框宽度autoCropHeight: 245, // 默认生成截图框高度fixedNumber: [1, 1], // 截图框的宽高比例fixedBox: false, // 固定截图框大小 不允许改变fixed: false, // 是否开启截图框宽高固定比例canMove: true, // 上传图片是否可以移动canMoveBox: true, // 截图框能否拖动original: false, // 上传图片按照原始比例渲染centerBox: true, // 截图框是否被限制在图片里面infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高full: true, // 是否输出原图比例的截图enlarge: '1', // 图片根据截图框输出比例倍数mode: 'contain', // 图片默认渲染方式success: res => {this.unimgurl = res.imgthis.imageUrl = URL.createObjectURL(res.img)}})

省略

 this.$refs.iscropper.showModal({img: img, // 裁剪图片的地址autoCropWidth: 375, // 默认生成截图框宽度autoCropHeight: 245, // 默认生成截图框高度success: res => {this.unimgurl = res.imgthis.imageUrl = URL.createObjectURL(res.img)}})

使用vue-cropper相关推荐

vue之使用Cropper进行图片剪裁上传压缩
vue之使用Cropper进行图片剪裁上传在项目中,对上传的图片按照比例和尺寸进行裁剪,以便于应用到不同的场景和平台上.这里采用cropper插件裁剪图片一.cropper的使用使用教程:htt ...
Vue 项目中 Cropper 图片裁剪的使用及遇到的问题
为什么用个人中心的头像上传需要对图片进行裁剪 1.安装引入 npm install vue-cropper 在 main.js 中 import VueCropper from 'vue-cropp ...
图片裁剪 cropper.js 上传组件封装 vue
//HTML cropper.js 文档地址: https://github.com/fengyuanchen/cropperjs/blob/master/README.md <template ...
Vue中使用vue-croper插件实现图片上传裁剪并传到SpringBoot后台接口
场景前后端分离的项目,前端修改头像时,需要对头像进行裁剪并且能实时预览,然后上传到SpringBoot后台. 实现效果如下注: 博客: https://blog.csdn.net/badao_li ...
button url图片显示不出来_哼！Vue如何在图片上传前使用vue-cropper进行剪切
首先package.json引入vue-cropper npm i vue-cropper -D template组件中加入上传表单,隐藏input表单,点击图片打开资源文件夹 < 然后继续在t ...
如何在vue中使用剪裁图片插件cropperImage
首先在components文件下创建一个剪裁组件我这里叫CropperImage/CropperImage.vue 完整代码 <template><div class="c ...
vue 移动端头像裁剪_使用vue-cropper裁剪正方形上传头像-阿里云开发者社区
引用方式在组件内使用 import { VueCropper } from 'vue-cropper' components: { VueCropper, }, main.js里面使用 import ...
史上最全基于vue的图片裁剪vue-cropper使用
史上最全基于vue的图片裁剪vue-cropper使用基于vue的图片裁剪vue-cropper 新的需求 vue-cropper官网代码拷贝最后基于vue的图片裁剪vue-cropper 最 ...
基于Vue的图片裁剪 vue-cropper
今天做项目遇到了这样一个需求:对于要上传的图片进行裁剪,于是发现了一个好的工具----vue-cropper 首先下载vue-cropper npm install vue-cropper 引入vue ...
使用cropper插件实现图片的裁剪和预览
安装cropperjs插件 npm install cropperjs 裁剪框以及图片的一些设置说明 ViewMode 视图控制取值: 0 无限制,裁剪框可以移动到图片外,预览时图片外的地方用黑色填 ...

使用vue-cropper

1.安装

2.使用

使用vue-cropper相关推荐

最新文章

热门文章