基于Vue的图片裁剪 vue-cropper

今天做项目遇到了这样一个需求：对于要上传的图片进行裁剪，于是发现了一个好的工具----vue-cropper

首先下载vue-cropper

npm install vue-cropper

引入vue-cropper

import { VueCropper } from 'vue-cropper'
export default {components: {VueCropper},}

封装成组件uploadPattern.vue

<template><div class="app-container"><el-dialog :title="dialogTitle" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog"><div class="cropper-content"><div class="cropper-box"><div class="cropper"><vue-cropperref="cropper":img="options.img":info="true":autoCrop="options.autoCrop":autoCropWidth="options.autoCropWidth":autoCropHeight="options.autoCropHeight":fixedBox="options.fixedBox"@realTime="realTime"></vue-cropper></div><!-- 底部操作工具按钮 --><div class="footer-btn"><div class="scope-btn"><label class="btn" for="uploads">选择图片</label><input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="selectImg($event)"><el-button size="mini" type="danger" plain icon="el-icon-zoom-in" @click="changeScale(1)">放大</el-button><el-button size="mini" type="danger" plain icon="el-icon-zoom-out" @click="changeScale(-1)">缩小</el-button><el-button size="mini" type="danger" plain @click="rotateLeft">↺ 左旋转</el-button><el-button size="mini" type="danger" plain @click="rotateRight">↻ 右旋转</el-button></div><div class="upload-btn"><el-button size="mini" type="success" @click="uploadImg('blob')">上传图片 <i class="el-icon-upload"></i></el-button></div></div></div><!--预览效果图--><div class="show-preview"><div :style="previews.div" class="preview"><img :src="previews.url" :style="previews.img"></div></div></div></el-dialog></div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { VueCropper } from 'vue-cropper'
export default {components: {VueCropper},props:{showModal:Boolean,//标题title:{type:String,default:''}},// 定义属性data() {return {dialogTitle:'',open:false,//上传标签图片对话框// 是否显示croppervisible: false,options: {img: '', //裁剪图片的地址autoCrop: true, // 是否默认生成截图框autoCropWidth: 200, // 默认生成截图框宽度autoCropHeight: 200, // 默认生成截图框高度fixedBox: true // 固定截图框大小 不允许改变},previews:{} //预览图片}},watch:{showModal(newVal){this.open=newVal;this.dialogTitle=this.title;}},// 方法集合methods: {//实时预览函数realTime(data){this.previews=data;},//打开弹窗层结束时的回调modalOpened(){this.visible=true;},//选择图片selectImg(e){let file=e.target.files[0];if(!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)){this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");}else{let reader=new FileReader()reader.readAsDataURL(file);reader.onload = (e)=>{this.options.img = reader.result;}}},//放大、缩小图片changeScale(num){num=num || 1;this.$refs.cropper.changeScale(num);},//左旋转rotateLeft(){this.$refs.cropper.rotateLeft();},//右旋转rotateRight(){this.$refs.cropper.rotateRight();},//关闭弹窗closeDialog(){this.$emit('update:showModal',false)},//上传图片uploadImg(type){if(type==='blob'){this.$refs.cropper.getCropBlob(data=>{let formData=new FormData();formData.append("file",data);this.$emit('uploadImg',formData);this.closeDialog();})}else{this.msgError('文件服务异常，请联系管理员')}}}
}
</script><style lang='scss' scoped>
.cropper-content{display: flex;display: -webkit-flex;justify-content: flex-end;.cropper-box{flex: 1;width: 100%;.cropper{width: auto;height: 300px;}}.show-preview{flex: 1;-webkit-flex: 1;display: flex;display: -webkit-flex;justify-content: center;.preview{overflow: hidden;border:1px solid #67c23a;background: #cccccc;}}
}
.footer-btn{margin-top: 30px;display: flex;display: -webkit-flex;justify-content: flex-end;.scope-btn{display: flex;display: -webkit-flex;justify-content: space-between;padding-right: 10px;}.upload-btn{flex: 1;-webkit-flex: 1;display: flex;display: -webkit-flex;justify-content: center;}.btn {outline: none;display: inline-block;line-height: 1;white-space: nowrap;cursor: pointer;-webkit-appearance: none;text-align: center;-webkit-box-sizing: border-box;box-sizing: border-box;outline: 0;-webkit-transition: .1s;transition: .1s;font-weight: 500;padding: 8px 15px;font-size: 12px;border-radius: 3px;color: #fff;background-color: #409EFF;border-color: #409EFF;margin-right: 10px;}
}
</style>

效果图如下：

放大之后进行裁剪：

最近遇到了这样一个问题，如果图片是透明的，那选择之后就会变成一片黑

解决办法：加一个属性 outputType为png,输出类型为png格式，这样背景就会是透明的了，如果是jpg格式就会有背景色

:outputType="'png'"

基于Vue的图片裁剪 vue-cropper相关推荐

史上最全基于vue的图片裁剪vue-cropper使用
史上最全基于vue的图片裁剪vue-cropper使用基于vue的图片裁剪vue-cropper 新的需求 vue-cropper官网代码拷贝最后基于vue的图片裁剪vue-cropper 最 ...
基于vue的图片裁剪框的实现
1.基于vue建设一个裁剪框全文附录我会放到最后,有需要的小伙伴自取 ## 1.1在没有添加图片的时候显示如上图的css样式 <label class="h-photo-left&q ...
vue实现图片裁剪后上传
一.背景目前负责的系统(商城后台管理系统)里面有这么一个需求,为了配合前台的展示,上传的商品图片比较必须是1:1的正方形.(其它地方有时会有5:4或者16:9的需求,但较少).所以需要对上传的图片先 ...
Vue - 实现图片裁剪功能，并上传到服务器（内置第三方最优秀的裁剪图片组件，上传到服务器功能）干净整洁无 BUG 的示例源码与超详细的注释，兼容任意浏览器
前言您可以滑动到文章最底部,直接克隆完整示例 Gitee 仓库,与本文教程最终效果一致. 在项目开发中,您难免会遇到图片上传到服务器之前,用户可进行裁剪的需求, 在看了网上大部分教程后,代码都非常乱 ...
简单的移动端图片裁剪vue插件[旋转，平移，缩放，印花]
Continuing the discussion from Vuex 插件自动缓存store指定数据(配置最简,性能最佳): ============================分割线=:jo ...
一个简单的 jQuery 图片裁剪插件----cropper
浏览器支持 Chrome (latest 2) Firefox (latest 2) Internet Explorer 8+ Opera (latest 2) Safari (latest 2) C ...
头像上传和图片裁剪功能(cropper.js)
<template><div class="user-profile"><input type="file" name=" ...
input file图片上传（使用OSS Javscrtipt 上传到服务器）以及图片裁剪（cropper.js）
一.图片上传 (1)使用 <input type="file" accept="image/*" name="file" @chang ...
android图片布局填冲满,Android图片裁剪库——cropper使用，完美解决图片填充不满布局问题...
前些时间请了一个月假,远程办公,期间项目主要做图片裁剪,脑子里第一反应就是github上开源裁剪库,试了排名的前几个,其中不是UI定制度太低就是裁剪效果不怎么样.当然你也可以直接intent一下系统的 ...

基于Vue的图片裁剪 vue-cropper

基于Vue的图片裁剪 vue-cropper相关推荐

最新文章

热门文章