//先安装包
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. zabbix如何监控Nvidia显卡的各项指标?

    如何实现zabbix监控windows机器的N卡GPU指标呢? Nvidia卡在安装驱动程序的时候,已经自带安装了一个命令行工具来获取显卡的各个性能指标值 在windows机器上,我们可以把该路径加入 ...

  2. Vue.use() 不一样的发现

    1.Vue.use()首先是可以接受一个函数 var a = function () { console.log(a)}Vue.use(a) // 没有问题会输出a 2.当这个a上面有install属 ...

  3. 跟着尚硅谷系统学习Docker-【day01】

    day01-20200710   p1.基础知识   鲸鱼背上有一些集装箱   学习docker得基础知识   1.强制:熟悉Linux命令和相关背景知识 2.建议有maven和git的相关知识   ...

  4. Mysql业务设计(物理设计)

    物理设计 根据所选择的关系型数据库的特点对逻辑模型进行存储结构的设计 物理设计: 定义数据库.表及字段的命名规范 选择合适的存储引擎 为表中的字段选择合适的数据类型 建立数据库结构 定义数据库.表及字 ...

  5. Java中nextInt和nextLine同时使用出现的问题

    代码: package com.ins1; import java.util.*; public class test { public static void main(String[] args) ...

  6. 从通达信导出文件获取A股所有股票代号名称(至2020年2月24日)

    下文是讲述如何从通达信的输出文件中获得股票信息,如果想用Java爬虫从网页爬取信息请参考:https://www.cnblogs.com/xiandedanteng/p/12808381.html 要 ...

  7. Django启动框架自带原始页面(Django一)

    1.安装,cmd中输入命令: pip install django (前提是python已安装完成,才可以使用pip这个python的库管理工具)ps:在cmd中使用pip命令安装时可能因为速度过慢而 ...

  8. 掌控安全less6 靶场简易--盲注

    1.判断是否存在sql注入 http://injectx1.lab.aqlab.cn:81/Pass-11/index.php?id=1"  and "1"=" ...

  9. ftp被动模式下 ftp_put 上传文件

    参考地址:https://blog.csdn.net/liuhelong12/article/details/50218311

  10. 云计算openstack——虚拟机获取不到ip(13)

    一.现象描述: openstack平台中创建虚拟机后,虚拟机在web页面中显示获取到了ip,但是打开虚拟机控制台后查看网络状态,虚拟机没有ip地址,下图为故障截图: 二.分析思路: (1)查看neut ...