vue2.9 使用croppa实现图像裁剪并上传服务器（croppa裁剪工具 + element 框架搭建）

首先安装croppa

npm install --save vue-croppa

安装完成之后，在需要的页面引入

  import Vue from "vue";//引用Croppa图片裁剪import Croppa from "vue-croppa";import "vue-croppa/dist/vue-croppa.css";Vue.use(Croppa);

其中基本参数

v-model="croppa" 绑定别名croppa来操作js
:show-remove-button="false" 是否显示取消按钮（默认true）
:width="360" :height="360" 设置默认宽高
:prevent-white-space="true" 防止出现空白（默认false）
accept="image/png" 接受文件类型
:initial-image=“http://....” 默认加载的图像
initial-size="natural" 初始大小不缩放（cover，contain，natural）
initial-position="center" 初始位置剧中（left，right，top，bottom，center，100% 20%）
:zoom-speed="10" 缩放/放大速度
:disabled="false" 禁止选中
:disable-click-to-choose="true" 禁止再次点击
:show-loading="true" 是否展示加载动画
:loading-size="50" 加载动画大小
:loading-color="#606060" 加载动画颜色
placeholder="选择图片" 默认提示文字
placeholder-color="#000" 默认提示文字颜色
:placeholder-font-size="16" 默认提示文字大小

在template模板中添加el弹框组件和croppa裁剪组件

          <!-- 引用el的dialog弹框组件，默认data中设置croppaVisible=true --><el-dialog title="图片裁剪" :visible.sync="croppaVisible" width="640px" :before-close="handleClose"><div class="croppa_box"><croppa v-model="croppa" :show-remove-button="false" :width="360" :height="360" :prevent-white-space="true" initial-size="natural"initial-position="center" :initial-image="'http://t00img.yangkeduo.com/goods/images/2018-07-19/15a2e96caa3851da064e464cf60eea3a.jpeg'"></croppa><div class="croppa_btns_box"><div class="croppa_btns_box_top"><el-tooltip class="item" effect="dark" content="上移" placement="top"><el-button type="primary" circle @click="croppa.moveUpwards(10)" icon="el-icon-arrow-up"></el-button></el-tooltip><el-tooltip class="item" effect="dark" content="下移" placement="top"><el-button type="primary" circle @click="croppa.moveDownwards(10)" icon="el-icon-arrow-down"></el-button></el-tooltip><el-tooltip class="item" effect="dark" content="左移" placement="top"><el-button type="primary" circle @click="croppa.moveLeftwards(10)" icon="el-icon-arrow-left"></el-button></el-tooltip><el-tooltip class="item" effect="dark" content="右移" placement="top"><el-button type="primary" circle @click="croppa.moveRightwards(10)" icon="el-icon-arrow-right"></el-button></el-tooltip><el-tooltip class="item" effect="dark" content="放大" placement="top"><el-button type="primary" circle @click="croppa.zoomIn(10)" icon="el-icon-zoom-in"></el-button></el-tooltip><el-tooltip class="item" effect="dark" content="缩小" placement="top"><el-button type="primary" circle @click="croppa.zoomOut(10)" icon="el-icon-zoom-out"></el-button></el-tooltip></div><div class="croppa_btns_box_bottom"><el-button type="primary" round @click="croppa.rotate()">旋转90°</el-button><el-button type="primary" round @click="croppa.rotate(2)">旋转180°</el-button><el-button type="primary" round @click="croppa.rotate(-1)">旋转-90°</el-button><el-button type="primary" round @click="croppa.flipX()">水平翻转</el-button><el-button type="primary" round @click="croppa.flipY()">垂直翻转</el-button></div></div></div><span slot="footer" class="dialog-footer"><el-button @click="croppaVisible = false">取 消</el-button><el-button type="primary" @click="uploadCroppedImage">确 定</el-button></span></el-dialog>

点击确认按钮，进行文件的上传

文件上传接口和post两处不同

一：是header设置为'Content-Type': 'multipart/form-data'

二：千万不要对data数据进行Qs.stringify()...太坑了

在data中添加变量

 croppa: {}

在methods中添加方法

//图片裁剪uploadCroppedImage() {let that = this;this.croppa.generateBlob(blob => {// 编写代码上传裁剪的图像文件// this.croppa.generateDataUrl() base64// console.log(blob);let formdata = new FormData();formdata.append("file", blob, "image.png"); //封装到formdata中//uploadFile接口和post两处不同//一：是header设置为'Content-Type': 'multipart/form-data'//二：千万不要对data数据进行Qs.stringify()...太坑了that.$http.uploadFile(上传地址, formdata).then(res => {console.log(res);let data = res.data;if (data.status) {that.$message.success("保存成功");that.dialogVisible = false;}});},"image/jpeg",0.8); // 80%压缩文件}

就可以直接从服务器中获取到文件地址并使用了

官网实例

https://zhanziyang.github.io/vue-croppa/#/

vue2.9 使用croppa实现图像裁剪并上传服务器（croppa裁剪工具 + element 框架搭建）相关推荐

JavaWeb实现裁剪图片上传完整代码
JavaWeb实现裁剪图片上传完整代码这篇文章主要为大家详细介绍了javaWeb实现裁剪图片上传完整代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JavaWeb实现裁剪 ...
手机端移动端的前端原生js裁剪图片上传
手机端移动端的前端原生js裁剪图片上传选择头像时裁剪上传,确保图片是个正方形,不会出现压扁拉伸的现象效果图原理很简单,其实就是用canvas截图出来而已,只是要对比例做一下处理. <!-- ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
android头像相册/拍照选取,裁剪及上传综合案例
在android项目中,很多情况下上传头像的需求,像qq,新浪微博,微信,飞信等很多应用都有这样的功能. 之前我写过的两篇文章:andorid下从相册选取/拍照选取一张相片并剪切和android下Bi ...
html上传图片裁剪,基于HTML5+JS实现本地图片裁剪并上传功能
基于HTML5+JS实现本地图片裁剪并上传功能 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了基于HTML5+JS实现本地图片裁剪并上传功 ...
ie js html 压缩,H5图片裁剪-压缩-上传-神奇的Croppie.js
Croppie.js之图片裁剪压缩上传 h5图片裁剪, 压缩, 上传, 预览是常见功能, 幸运的是我们有cropp.js这款利器. 1. style .actions button, .actions ...
javaWeb实现裁剪图片上传整套方案
实现思路使用jcrop插件手机要裁剪图片的坐标将收集到的参数传递到后台,在后台使用java图形对象绘制图像进行裁剪后台处理流程: 1.将上传的图片按按照比例进行压缩后上传到文件服务器,并且将 ...
个人界面头像图片选择(相册,拍照)--如何调用系统的相册,裁剪并且上传
##需求:个人界面的,个人头像图片的切换方式一:点击开始切换头像的pop–相册选择二:这里有两种方式,从相册选择和直接拍照,假设现在是从相册选择选择头像 *我在pop确定的点击方法中写了一个方法- ...
【小程序开发原创】小程序裁剪图片上传头像，二维码源码
微信小程序图片裁剪工具,简单易用项目需求在做微信小程序的时候有个图片上传之前裁剪的需求,找过一些github中的项目,都不太理想,主要是没有办法自定义宽高,于是自己研究了一下,做了一个简单的图片 ...

vue2.9 使用croppa实现图像裁剪并上传服务器（croppa裁剪工具 + element 框架搭建）

vue2.9 使用croppa实现图像裁剪并上传服务器（croppa裁剪工具 + element 框架搭建）相关推荐

最新文章

热门文章

vue2.9 使用croppa实现图像裁剪并上传服务器 （croppa裁剪工具 + element 框架搭建）

vue2.9 使用croppa实现图像裁剪并上传服务器 （croppa裁剪工具 + element 框架搭建）相关推荐

最新文章

热门文章

vue2.9 使用croppa实现图像裁剪并上传服务器（croppa裁剪工具 + element 框架搭建）

vue2.9 使用croppa实现图像裁剪并上传服务器（croppa裁剪工具 + element 框架搭建）相关推荐