//先安装包
npm install vue-cropper --save-dev
<template>
<div id="merchantInformation">
<div class="upData">
<label class="btn btn-orange" for="uploads">上传LOGO</label>
<input type="file" id="uploads" :value="imgFile" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImgg($event, 1)">
<div class="line" >
<div class="cropper-content" >
<div class="cropper">
<vueCropper
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"
></vueCropper>
</div>
<div style="margin-left:20px;">
<div class="show-preview" :style="{'width': '150px', 'height':'155px', 'overflow': 'hidden', 'margin': '5px'}">
<div :style="previews.div" class="preview">
<img :src="previews.url" :style="previews.img">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template> <script>
import { VueCropper } from 'vue-cropper'
export default {
data(){
return{
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: 132,
autoCropHeight: 132,
fixedBox: true,
fixedNumber: [1,1]
},
fileName:'', //本机文件地址
imgFile:'',
imgurl:''
}
},
components: {
VueCropper
},
methods:{
AddImg(){
this.$refs.cropper.getCropBlob( data => { //把裁剪后的数据上传给后台
console.log(data)
})
},
// 实时预览函数
realTime(data) {
this.previews = data
console.log(this.previews)
},
//选择本地图片
uploadImgg(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)) {
this.$message({
message: '图片类型必须是.gif,jpeg,jpg,png,bmp中的一种',
type: 'warning'
});
return false
}
var reader = new FileReader();
reader.onload =(e) => {
let data;
if (typeof e.target.result === 'object') {
// 把Array Buffer转化为blob 如果是base64不需要
data = window.URL.createObjectURL(new Blob([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)
}
}
}
</script> <style lang="less">
.input_text .el-cascader .el-input .el-input__inner{width: 477px;height: 40px;border: 1px solid #f1f1f1;}
.input_text .el-select .el-input .el-input__inner{width: 477px;height: 40px;border: 1px solid #f1f1f1;}
#merchantInformation .upload-demo{display: flex;}
#merchantInformation .upload-demo li{width: 100px;height: 113px;margin-top: 0px;display: inline-block;}
#merchantInformation .el-date-editor.el-input, .el-date-editor .el-input__inner{width: 477px;height: 40px;}
#merchantInformation .upload-demo .el-upload-list{display: none;}
</style> <style lang="less" scoped>
#merchantInformation{
height: 925px;width:890px;box-shadow: 0px 0px 1px #dfdddd;background:#fff;overflow: hidden;
}
.uploadingLogo{margin-right: 80px;}
// .uploadingLogoa{margin-right: 70px;}
.logoUrl{max-width: 300px;border-radius: 10px;}
.propagandaUrl{width: 265px;height: 177px;}
.amendd{position: absolute;right: 90px;top: 12px;cursor: pointer;display: flex;align-items: center;color: #1c8cfa;}
.uploadImga{width: 100px;height: 90px;margin-top: 10px;} .perfect{color: #1c8cfa;font-size: 14px;display: flex;justify-content: center;flex-wrap:wrap;
p{cursor: pointer;width: 100%;text-align: center;margin-top: 10px;}
}
.logo_I{width: 100px;height: 100px;}
.UploadPictures_IMG{width: 120px;height: 100px;margin-left: 20px;}
.hintsize{font-size: 12px;color: #343435;}
.info {
width: 720px;
margin: 0 auto;
.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;
.cropper{
width: 200px;
height: 200px;
}
.show-preview{
width: 132px !important;height: 135px !important;
flex: 1;
-webkit-flex: 1;
display: flex; .preview{
overflow: hidden;
border-radius: 20px;
border:1px solid #cccccc;
background: #cccccc;
margin-left: 40px;
}
}
}
.cropper-content .show-preview .preview {margin-left: 0;}
.btn-orange{width: 100px;height: 40px;display: block;line-height: 40px;background: #1c8cfa;color: #fff;text-align: center;
border-radius: 10px;margin-right: 30px;
}
.upData{display: flex;align-items: center;margin-top: 20px; }
.line{margin-left: 21px;} </style>

vue使用vueCropper裁剪功能,代码复制直接使用的更多相关文章

  1. 一行代码彻底禁用WordPress缩略图自动裁剪功能

    记得在博客分享七牛缩略图教程的时候,提到过 WordPress 默认会将上传的图片裁剪成多个,不但占用磁盘空间,也会拖慢网站性能,相当闹心! 当时也提到了解决办法: ①.关闭主题自带缩略图裁剪功能(若 ...

  2. vue 图片上传功能

    这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下:   <ul class="clearfix">   ...

  3. vue-cropper裁剪上传

    效果图: 全部代码: npm install vue-cropper //首先 安装vue-cropper main.js全局引用: import VueCropper from 'vue-cropp ...

  4. 用JQuery仿造QQ头像裁剪功能

    最近工作真心忙碌,几乎没时间写博客.今天趁周末来仿一个QQ头像裁剪功能插件.效果如下: 所有文件都可在我的Github上下载,从头到尾从简到繁按步骤一共分了9个HTML文件,每个步骤文件里的注释都写的 ...

  5. ArcGIS API for Silverlight 使用GP服务实现要素裁剪功能

    原文:ArcGIS API for Silverlight 使用GP服务实现要素裁剪功能 昨天一QQ好友问了一个关于裁剪的问题,感觉自己也没有帮上什么忙,之后自己做了一个裁剪的例子,不过在做这个例子的 ...

  6. jQuery插件ImgAreaSelect 实例讲解一(头像上传预览和裁剪功能)

    上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...

  7. CI 结合 vue.js 的搜索功能模块

    CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...

  8. 20个开发人员非常有用的Java功能代码

    本文将为大家介绍20个对开发人员非常有用的Java功能代码.这20段代码,可以成为大家在今后的开发过程中,Java编程手册的重要部分. 1. 把Strings转换成int和把int转换成String ...

  9. ThinkPHP实现支付宝接口功能 代码实例

    我们这里用的是即时到帐的接口,具体实现的步骤如下: [title]一.下载支付宝接口包[/title]下载地址:https://doc.open.alipay.com/doc2/detail?tree ...

随机推荐

  1. 移动开发中如何整合HTML 5和原生代码

    移动开发中如何整合HTML 5和原生代码 https://blog.csdn.net/lvjin110/article/details/41038565

  2. three.js尝试(二)模拟游戏开发:3D人物在地图上行走

    本次尝试,模拟了一个小人物在场景中行走,使用简单模型建立了森林,图片纹理模拟草地,加载3D模型呈现人物,使用按键asdw模拟人物的行走,行走和站立时人物的切换等. 主要用到点:3D模型的加载,模型的动 ...

  3. 1DadaFrame和Series创建

    通过GroupBy创建DF对象 sn_group=data.groupby('SN') purchase_count=sn_group.count().Price average_purchase_p ...

  4. 【CF】Sereja and Arcs

    #include <bits/stdc++.h> #define llong long long using namespace std; const int N = 1e5; const ...

  5. 常见的开源 License

    目录 什么是开源软件 什么是 license 商业许可证与开源许可证 对开发者的影响 开源许可证的类型 如何选择开源许可证 什么是开源软件 开放源代码的软件.假设有一天自我感觉代码能力不错,写了个小工 ...

  6. java-程序流程控制

    判断结构 if(条件){}; if(条件){} else{ }; if(条件){}else{};格式类似3目运算:int a=2,b;b=(a>5)?7:8;这种格式比较简便 if(条件){ } ...

  7. CSS -- 元素简介

    一.元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1 ...

  8. VS调试出现解决 尝试加载 Oracle 客户端库时引发 BadImageFormatException。如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行,将出现此问题

  9. c语言汇总1

    (1--10) 1.机器语言(0,1) 汇编语言(换元法) 高级语言(人) 2.C语言由函数组成而成 main函数系统会自动启动它 3.main函数格式: int main(){ call(): re ...

  10. Dubbo系列之服务暴露过程

    点赞再看,养成习惯,微信搜一搜[三太子敖丙]关注这个喜欢写情怀的程序员. 本文 GitHub https://github.com/JavaFamily 已收录,有一线大厂面试完整考点.资料以及我的系 ...