vue 实现ps图片编辑_Vue项目图片剪切上传——vue-cropper的使用
选择图片
ref="cropper":img="option.img":outputSize="option.size":outputType="option.outputType":info="true":full="option.full":canMove="option.canMove":canMoveBox="option.canMoveBox":original="option.original":autoCrop="option.autoCrop":autoCropWidth="option.autoCropWidth":autoCropHeight="option.autoCropHeight":fixedBox="option.fixedBox"@realTime="realTime"@imgLoad="imgLoad"
>
exportdefault{
data() {return{
headImg:'',//剪切图片上传
crap: false,
previews: {},
option: {
img:'',
outputSize:1, //剪切后的图片质量(0.1-1)
full: false,//输出原图比例截图 props名full
outputType: 'png',
canMove:true,
original:false,
canMoveBox:true,
autoCrop:true,
autoCropWidth:150,
autoCropHeight:150,
fixedBox:true},
fileName:'', //本机文件地址
downImg: '#',
imgFile:'',
uploadImgRelaPath:'', //上传后的图片的地址(不带服务器域名)
}
},
components: {
VueCropper
},
methods: {
//放大/缩小
changeScale(num) {
console.log('changeScale')
num= num || 1;this.$refs.cropper.changeScale(num);
},//坐旋转
rotateLeft() {
console.log('rotateLeft')this.$refs.cropper.rotateLeft();
},//右旋转
rotateRight() {
console.log('rotateRight')this.$refs.cropper.rotateRight();
},//上传图片(点击上传按钮)
finish(type) {
console.log('finish')
let _this= this;
let formData= newFormData();//输出
if (type === 'blob') {this.$refs.cropper.getCropBlob((data) =>{
let img=window.URL.createObjectURL(data)this.model = true;this.modelSrc =img;
formData.append("file", data, this.fileName);this.$http.post(Api.uploadSysHeadImg.url, formData, {contentType: false, processData: false, headers:{'Content-Type': 'application/x-www-form-urlencoded'}})
.then((response)=>{var res =response.data;if(res.success == 1){
$('#btn1').val('');
_this.imgFile= '';
_this.headImg= res.realPathList[0]; //完整路径
_this.uploadImgRelaPath = res.relaPathList[0]; //非完整路径
_this.$message({ //element-ui的消息Message消息提示组件
type:'success',
message:'上传成功'});
}
})
})
}else{this.$refs.cropper.getCropData((data) =>{this.model = true;this.modelSrc =data;
})
}
},//实时预览函数
realTime(data) {
console.log('realTime')this.previews =data
},//下载图片
down(type) {
console.log('down')var aLink = document.createElement('a')
aLink.download= 'author-img'
if (type === 'blob') {this.$refs.cropper.getCropBlob((data) =>{this.downImg =window.URL.createObjectURL(data)
aLink.href=window.URL.createObjectURL(data)
aLink.click()
})
}else{this.$refs.cropper.getCropData((data) =>{this.downImg =data;
aLink.href=data;
aLink.click()
})
}
},//选择本地图片
uploadImg(e, num) {
console.log('uploadImg');var _this = this;//上传图片
var file = e.target.files[0]
_this.fileName=file.name;if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')return false}var reader = newFileReader();
reader.οnlοad=(e) =>{
let data;if (typeof e.target.result === 'object') {//把Array Buffer转化为blob 如果是base64不需要
data = window.URL.createObjectURL(newBlob([e.target.result]))
}else{
data=e.target.result
}if (num === 1) {
_this.option.img=data
}else if (num === 2) {
_this.example2.img=data
}
}//转化为base64
//reader.readAsDataURL(file)
//转化为blob
reader.readAsArrayBuffer(file);
},
imgLoad (msg) {
console.log('imgLoad')
console.log(msg)
}
},
}
width: 720px;
margin:0auto;
.oper-dv {
height:20px;
text-align:right;
margin-right:100px;
a {
font-weight: 500;&:last-child {
margin-left: 30px;
}
}
}
.info-item {
margin-top: 15px;
label {
display: inline-block;
width: 100px;
text-align: right;
}
.sel-img-dv {
position: relative;
.sel-file {
position: absolute;
width: 90px;
height: 30px;
opacity:0;
cursor: pointer;
z-index: 2;
}
.sel-btn {
position: absolute;
cursor: pointer;
z-index: 1;
}
}
}
}
.cropper-content{
display: flex;
display:-webkit-flex;
justify-content: flex-end;-webkit-justify-content: flex-end;
.cropper{
width: 260px;
height: 260px;
}
.show-preview{
flex:1;-webkit-flex: 1;
display: flex;
display:-webkit-flex;
justify-content: center;-webkit-justify-content: center;
.preview{
overflow: hidden;
border-radius: 50%;
border:1px solid #cccccc;
background: #cccccc;
margin-left: 40px;
}
}
}
.cropper-content .show-preview .preview {margin-left: 0;}
vue 实现ps图片编辑_Vue项目图片剪切上传——vue-cropper的使用相关推荐
- 结合axios(formdata)+vue-cropper+element ui实现头像图片剪切上传
萌新用vue + axios + formdata 上传文件的爬坑之路 https://blog.csdn.net/qq_41688165/article/details/80834842 结合vue ...
- 【VUE】Toast-UI/Editor工具实现图片自定义上传到服务器
Toast-UI/Editor工具实现图片自定义上传到服务器 author: jwensh date: 2021.06.17 文章目录 Toast-UI/Editor工具实现图片自定义上传到服务器 所 ...
- 基于vue + axios + lrz.js 微信端图片压缩上传
业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
- ueditor 图片上传 java_Spring+Vue整合UEditor富文本实现图片附件上传的方法
下载UEditor 下载完整源码和JSP版本 Spring后端集成 1. 解压完整源码,拷贝jsp目录下的java源码,到spring mvc后端 jsp目录下java源码 集成spring mvc后 ...
- ngnix 配置多个前端项目(首次上传vue)
我这次初体验有点特殊.一是,刚买的服务器还没有绑定域名,直接暴露服务器地址,很尴尬.二是,我第二个项目是用vue上手的,打包上线的流程也需要记录. 打包vue项目 上传到服务器 修改ngnix配置文件 ...
- vue使用cropperjs实现移动端图片裁剪上传组件
本组件基于vuejs框架, 使用ES6基本语法, css预编译采用的scss, 图片裁剪模块基于cropperjs,拍照时的图片信息获取使用exif, 图片上传使用XMLHttpRequest 该组件 ...
- layui+croppers完成图片剪切上传
不多说直接上代码: 前台代码: <!DOCTYPE html> <html> <head><meta charset="utf-8" /& ...
- 利用jquery插件的图片剪切上传功能
为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用.主要实现的形式有两种,一种是flash截图,另一种就是javascript截图, ...
- 车型库项目图片批量上传功能
自09年5月份进入公司,已近两年.之前一直在忙于项目上的开发,没时间整理.从今日起,把做过的项目整理一遍,归纳成档,以便查阅. 公司技术部差不多十来个人,但分工明确.技术部别分为了两个开发小组.我主要 ...
最新文章
- postgresql开发中可能有用的知识
- mysql ssl_cipher_mysql添加用户:出现Field 'ssl_cipher' doesn't have a defa
- 独家 | 避免神经网络过拟合的5种技术(附链接)
- GPU处理图像 Shader的入门
- C指针原理(26)-gtk
- 牛客练习赛24题解(搜索,DP)
- Django之orm查询
- springcloud工作笔记104---Spring中的InitializingBean接口以及afterPropertiesSet的使用
- re.split() 根据句子中的序号进行切分
- Mongodb 3.2.X 添加admin的root账户
- 最全中文停用词表(可直接复制)
- 海滨学院计算机基础知识,北京交通大学海滨学院大学计算机基础考试题库(全)...
- linux下如何统计一个目录下的文件个数以及代码总行数的命令
- 小 Mil 来了!Milvus 智能问答机器人上线
- Java8新特性 方法引用(四)
- 青橙N1云OS系统刷机
- 电驴 链接不到服务器
- 网站留言板防重复留言_公众号留言板怎么弄
- 师董正伟:商务部受理微软涉垄断案
- 分布式IO模块在工厂中的应用