cesium加载entity图片缩放_Vue中使用vuecroper插件实现图片上传裁剪并传到SpringBoot后台接口...
场景
前后端分离的项目,前端修改头像时,需要对头像进行裁剪并且能实时预览,然后上传到SpringBoot后台。
实现效果如下
注:
博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
插件官网
https://github.com/xyxiao001/vue-cropper
安装插件
install vue-cropper
引用插件
组件内使用
import { VueCropper } from 'vue-cropper'
components: {
VueCropper,
},
main.js里面使用
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
cdn方式使用
Vue.use(window['vue-cropper'].default)
nuxt 使用方式
if(process.browser) {
vueCropper = require('vue-cropper')
Vue.use(vueCropper.default)
}
这里只是在头像上传组件内使用,所以采用
import { VueCropper } from 'vue-cropper'
components: {
VueCropper,
},
的方式。
使用
把上传图片和裁剪图片和预览都放在一个dialog里面,只有在点击修改头像按钮时才显示此dialog
ref="cropper"
:img="options.img"
:info="true"
:autoCrop="options.autoCrop"
:autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight"
:fixedBox="options.fixedBox"
@realTime="realTime"
v-if="visible"
/>
上传
提 交
这个dialog的布局的效果如下
通过:visible.sync="open" 绑定的是否显示的变量为open,需要声明
data() {
return {
// 是否显示弹出层
open: false,
然后在修改头像按钮的点击事件中
// 编辑头像
editCropper() {
this.open = true;
},
显示此dialog
然后图片裁剪控件的代码为
ref="cropper"
:img="options.img"
:info="true"
:autoCrop="options.autoCrop"
:autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight"
:fixedBox="options.fixedBox"
@realTime="realTime"
v-if="visible"
/>
此控件的属性
名称 | 功能 | 默认值 | 可选值 |
img | 裁剪图片的地址 | 空 | url 地址 || base64 || blob |
outputSize | 裁剪生成图片的质量 | 1 | 0.1 - 1 |
outputType | 裁剪生成图片的格式 | jpg (jpg 需要传入jpeg) | jpeg || png || webp |
info | 裁剪框的大小信息 | true | true || false |
canScale | 图片是否允许滚轮缩放 | true | true || false |
autoCrop | 是否默认生成截图框 | false | true || false |
autoCropWidth | 默认生成截图框宽度 | 容器的80% | 0~max |
autoCropHeight | 默认生成截图框高度 | 容器的80% | 0~max |
fixed | 是否开启截图框宽高固定比例 | true | true | false |
fixedNumber | 截图框的宽高比例 | [1, 1] | [宽度, 高度] |
full | 是否输出原图比例的截图 | false | true | false |
fixedBox | 固定截图框大小 不允许改变 | false | true | false |
canMove | 上传图片是否可以移动 | true | true | false |
canMoveBox | 截图框能否拖动 | true | true | false |
original | 上传图片按照原始比例渲染 | false | true | false |
centerBox | 截图框是否被限制在图片里面 | false | true | false |
high | 是否按照设备的dpr 输出等比例图片 | true | true | false |
infoTrue | true 为展示真实输出图片宽高 false 展示看到的截图框宽高 | false | true | false |
maxImgSize | 限制图片最大宽度和高度 | 2000 | 0-max |
enlarge | 图片根据截图框输出比例倍数 | 1 | 0-max(建议不要太大不然会卡死的呢) |
mode | 图片默认渲染方式 | contain | contain , cover, 100px, 100% auto |
这里设置此插件的一些属性与对象options的属性绑定。
声明对象options并设置一些属性
options: {
img: 'https://images.cnblogs.com/cnblogs_com/badaoliumangqizhi/1539113/o_qrcode_for_gh_f76a8d7271eb_258.jpg', //裁剪图片的地址
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 200, // 默认生成截图框宽度
autoCropHeight: 200, // 默认生成截图框高度
fixedBox: true // 固定截图框大小 不允许改变
},
这里给裁剪的图片设置了一张默认图片,在上传后会重新给该img属性赋值,img就是裁剪图片的地址。
实时预览是通过 @realTime="realTime"
绑定的函数realTime
// 实时预览
realTime(data) {
this.previews = data;
}
会将参数data赋值给定义的对象preview
previews: {}
然后上面的布局中预览的img是
给img标签赋值参数的url style赋值img属性就可。可以参照其官方案例
@realTime="realTime"
// Real time preview function
realTime(data) {
var previews = data;
var h = 0.5;
var w = 0.2;
this.previewStyle1 = {
width: previews.w + "px",
height: previews.h + "px",
overflow: "hidden",
margin: "0",
zoom: h
};
this.previewStyle2 = {
width: previews.w + "px",
height: previews.h + "px",
overflow: "hidden",
margin: "0",
zoom: w
};
固定为100宽度
this.previewStyle3 = {
width: previews.w + "px",
height: previews.h + "px",
overflow: "hidden",
margin: "0",
zoom: 100 / preview.w
};
固定为100高度
this.previewStyle4 = {
width: previews.w + "px",
height: previews.h + "px",
overflow: "hidden",
margin: "0",
zoom: 100 / preview.h
};
this.previews = data;
},
中等大小
迷你大小
下方那一排的图片的缩放和旋转都是调用的插件自带的函数
// 向左旋转
rotateLeft() {
this.$refs.cropper.rotateLeft();
},
// 向右旋转
rotateRight() {
this.$refs.cropper.rotateRight();
},
// 图片缩放
changeScale(num) {
num = num || 1;
this.$refs.cropper.changeScale(num);
},
此插件的其他内置函数
this.$refs.cropper.startCrop() 开始截图
this.$refs.cropper.stopCrop() 停止截图
this.$refs.cropper.clearCrop() 清除截图
this.$refs.cropper.changeScale() 修改图片大小 正数为变大 负数变小
this.$refs.cropper.getImgAxis() 获取图片基于容器的坐标点
this.$refs.cropper.getCropAxis() 获取截图框基于容器的坐标点
this.$refs.cropper.goAutoCrop 自动生成截图框函数
this.$refs.cropper.rotateRight() 向右边旋转90度
this.$refs.cropper.rotateLeft() 向左边旋转90度
图片加载的回调 imgLoad 返回结果success, error
获取截图信息
this.$refs.cropper.cropW 截图框宽度
this.$refs.cropper.cropH 截图框高度
// 获取截图的base64 数据
this.$refs.cropper.getCropData((data) => {
// do something
console.log(data)
})
// 获取截图的blob数据
this.$refs.cropper.getCropBlob((data) => {
// do something
console.log(data)
})
前端上传图片的实现是使用ElementUI的el-upload实现。
上传
这里要对其进行一些设置
将其action设置为#不让其上传到远程url,然后重写覆盖其http-request
// 覆盖默认的上传行为
requestUpload() {
},
来覆盖其默认的上传行为。
然后重写其上传前的方法进行上传预处理
// 上传预处理
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;
};
}
},
在方法中判断上传文件的类型是否是图片,然后获取图片的url并将其赋值给option的img属性,这样裁剪控件就能获取到上传的图片的url并能显示。
而实时预览也能通过裁剪控件的data的url获取到。
然后就是点击提交按钮裁剪后的照片提交给SpringBoot后台
// 上传图片
uploadImg() {
this.$refs.cropper.getCropBlob(data => {
let formData = new FormData();
formData.append("file", data);
uploadimg(formData).then(response => {
if (response.code === 200) {
this.open = false;
this.options.img = process.env.VUE_APP_BASE_API + response.data;
console.log(this.options.img)
this.$emit('changezp', this.options.img)
this.msgSuccess("修改成功");
}
this.visible = false;
});
});
},
通过this.$refs.cropper以及设置的ref="cropper"来获取裁剪控件,然后调用他的内置函数获取blob数据。
然后构建一个FormData对象,并设置其file为裁剪图片的data
然后将此formData采用post请求的方式提交到SpringBoot后台
// 用户头像上传
export function uploadAvatar(data) {
return request({
url: '/system/user/profile/avatar',
method: 'post',
data: data
})
}
这里的request是封装的axios请求对象向后台发动post请求并传递data参数。
在SpringBoot后台
@PostMapping("/upload")
public AjaxResult uploadProfile(MultipartFile file){
try {
String path = FileUploadUtils.upload(RuoYiConfig.getAvatarPath(), file);
path = path.replaceAll("//","/");
System.out.println("========path: " + path);
return AjaxResult.success("success",path);
}catch (Exception e){
e.printStackTrace();
return AjaxResult.error("上传失败");
}
}
就能通过MultipartFile file接受到图片文件并上传到服务器返回前端能访问静态资源的路径。
具体实现可以参照下面博客
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108383134
cesium加载entity图片缩放_Vue中使用vuecroper插件实现图片上传裁剪并传到SpringBoot后台接口...相关推荐
- cesium加载entity图片缩放_教你使用最简单粗暴的js方法实现图片最小边展示
实现图片的最小边展示,我们可以直接用background-size:cover;来解决,但是,background是毕竟不是img,如果想宽度固定,高度自适应还是比较难的,而直接用img,那么只能使用 ...
- Vue中使用vue-croper插件实现图片上传裁剪并传到SpringBoot后台接口
场景 前后端分离的项目,前端修改头像时,需要对头像进行裁剪并且能实时预览,然后上传到SpringBoot后台. 实现效果如下 注: 博客: https://blog.csdn.net/badao_li ...
- cesium加载entity图片缩放_Cesium中级教程4 – 空间数据可视化(二)
Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ Viewer中的Entity功能 让我们看看Viewer为操作e ...
- 加载vue文件步骤_vue中.vue文件解析步骤详解
这次给大家带来vue中.vue文件解析步骤详解,vue中.vue文件解析的注意事项有哪些,下面就是实战案例,一起来看一下. 我们平时写的 .vue 文件称为 SFC(Single File Compo ...
- cesium加载wms、wmts、tms、wfs服务
目录 cesium加载wms服务 cesium加载wmts服务 cesium加载tms服务 cesium加载wfs服务 首先引入cesium.js,参考:https://blog.csdn.net/q ...
- 【MFC】动态加载Picture Control控件中的图片
[MFC]动态加载Picture Control控件中的图片 前言 方法1:CBrush 方法2:SetBitmap 参考链接 方法3:重写MyPictureControl 前言 在MFC窗体中,我们 ...
- cesium加载批量模型
cesium加载批量模型 class CreateModel {constructor() { }// 添加单条数据addEntity(item) {// 删除实体// viewer.entities ...
- Cesium加载建筑物模型(shp转Geojson\3Dtiles)
本文主要介绍cesium加载Geojson和3dtile格式的建筑物模型文件,除此之外还介绍了Cesium工具栏的屏蔽方法.天地图的加载.地球初始状态设置等几个部分的内容,其中又不乏参照.优化诸如: ...
- cesium加载动图方案三:通过apng-js库实现
1.项目场景 实际开发中我们经常会有动图加载的需求,而Cesium不支持纹理贴动图,怎么样基于Cesium实现动图的加载,值得我们研究一波.cesium加载gif格式的动图有些场景能够满足我们的需求, ...
- Cesium加载离线地图
Cesium加载离线地图 一.下载地图并导出为tms格式 二.安装nginx并配置静态文件服务路径 一.下载地图并导出为tms格式 利用地图下载器下载相关范围的地图,然后导出为tms格式的地图切片 二 ...
最新文章
- mongo go 查询指定字段_Go语言 操作MongoDB数据库批量查询
- ACL Fellow 2021名单出炉!华为刘群、中科院自动化所宗成庆当选!
- java强克隆_java之克隆clone解密
- 22种代码味道(Martin Fowler与Kent Beck)
- Vue+flask前后端开发
- .NET 6新特性试用 | 可写JSON DOM API
- html中怎么选择相同的代码,不同的HTML,相同的代码隐藏和相同的控件
- oracle解决存储嗅探,DBA警示录:存储故障的处理应当谨慎
- jQuery formValidator表单验证插件4.1.1提供下载
- 【WP8】Uri关联启动第三方App
- win7无线网络突然不能用了(或打开无线按钮灰色)
- 织梦dede采集文章
- [windows] win10下的SysMain服务
- 数据库服务:数据库表空间扩容
- linux calloc
- selenium IED安装
- 上海亚商投顾:沪指失守3300点 传媒、游戏板块逆市大涨
- 不可不知的安卓屏幕知识
- 【教程】如何把iPad变成PC端的扩展屏
- Dubbo面试题总结
热门文章
- mysql dump 1449_Mysqldump 1449 错误解决 mysqldump: Got error: 1449
- chrome transition闪烁BUG 阿星小栈
- https://juejin.im/post/5aa4a2e35188255589496eb8#comment
- css3中自适应边框图片运用
- Springboot中Feign的使用方法
- linux进入欢迎界面一直重启,Linux无限重启怎么办
- 如何安装vue并创建vue.js框架项目
- A Survey on Vision Transformer
- MM-DD-RRRR / MM-DD-YYYY 的区别【Blog 搬家】
- 【WSN通信】基于matlab A_Star改进LEACH多跳传输协议【含Matlab源码 487期】