vue+七牛云 截图工具
1、安装:npm install vue-cropper
2、引入:import VueCropper from 'vue-cropper' Vue.use(VueCropper)
<template>
<div class='box'>
<el-button @click='dialogImg=true'>截图</el-button>
<div class="img">
<img style="width: 100%; height: 100%;" v-if="option.img" :src="option.img" alt="" />
</div>
<el-dialog
class="dialogImgClass"
title=""
:visible.sync="dialogImg"
size="middle"
:before-close="handleClose1">
<div class="dialogBox">
<el-row>
<span style="margin-right:20px;">切图工具比例</span>
<el-radio-group v-model="pictureRatio" @change="changePicRatio">
<el-radio class="radio" label="1">16:9</el-radio>
<el-radio class="radio" label="2">1:1</el-radio>
<el-radio class="radio" label="3">无</el-radio>
</el-radio-group>
</el-row>
<div class="wrapper">
<vueCropper
style="border: 1px solid;"
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
:info="option.info"
:canScale="option.canScale"
:autoCrop="option.autoCrop"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
:full="option.full"
:centerBox="option.centerBox"
:original="option.original"
@realTime="realTime">
</vueCropper>
</div>
<div class="btn-box">
<label class="btn" for="upload">选择照片</label>
<input name="file" type="file" id="upload" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)">
<el-button :plain="true" type="danger" style="background: #e03434;color: #fff;" @click="finishUpdate('base64')">上传照片</el-button>
</div>
</div>
</el-dialog>
</div>
</template> <script>
import {VueCropper} from 'vue-cropper'
import api from '../fetch/api'
export default {
data () {
return {
dialogImg:false,
pictureRatio:"2",//根据选项修改图片比例
exam:null,
option:{
img: '',
info: true,
size: 1,
outputType: 'png',
canScale:true,
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 540,
autoCropHeight: 540,
// 开启宽度和高度比例
fixed: true,
fixedNumber: [16, 16],
fileaa:null,
full:true,//输出原图比例的截图
centerBox:true,//截图框是否限制在图片里(只有自动截图开启才生效)
original:false,//上传图片是否显示原始宽高(针对大图,可以铺满)
},
qiniu:{
key:'',
token:'',
file:''
},//七牛云数据
}
},
components: {
'vueCropper': VueCropper
},
created(){ },
methods: {
changePicRatio(val){//切换图片比例
// console.log(val);
if(val==="1"){
this.option.fixedNumber = [16, 9];
this.option.autoCrop = true;
this.option.fixed = true;
if(this.exam != null){
this.$refs.cropper.clearCrop();
this.$refs.cropper.startCrop();
this.uploadImg (this.exam);
console.log("改成16:9");
}else if(this.option.img != ''){
this.$refs.cropper.clearCrop();
this.$refs.cropper.startCrop();
}
}else if(val==="2"){
this.option.fixedNumber = [16, 16];
this.option.autoCrop = true;
this.option.fixed = true;
if(this.exam != null){
this.$refs.cropper.clearCrop();
this.$refs.cropper.startCrop();
this.uploadImg (this.exam);
console.log("改成1:1");
}else if(this.option.img != ''){
this.$refs.cropper.clearCrop();
this.$refs.cropper.startCrop();
}
}else if(val==="3"){
this.option.autoCrop = false;
this.option.fixed = false;
this.$refs.cropper.clearCrop();
this.$refs.cropper.startCrop();
}
},
uploadImg (e) {
this.exam=e;
//上传图片
// this.option.img
var file = e.target.files[0]
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
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
}
this.option.img = data
}
this.fileaa = e.target.files[0];
console.log(this.fileaa);
// 转化为base64
reader.readAsDataURL(file)
// 转化为blob
// reader.readAsArrayBuffer(file)
},
finishUpdate(type){
this.$refs.cropper.getCropData((data)=>{
this.option.img = data;
let pic = data.replace(/^.*?,/, '');
let size = this.fileSize(pic);
let data1 = {};
api.get(api.config.getUploadVoucher,data1).then(res=>{
if(res.code==1){
console.log(res);
this.qiniu.key = res.data.mediaKey;
this.qiniu.token = res.data.token;
let id = res.data.mediaId;
this.fileId = res.data.mediaId;
let url = "http://up-z2.qiniu.com/putb64/"+size+"/key/"+this.baseCode64(this.qiniu.key);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState==4){
console.log(xhr.responseText)
}
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", "UpToken "+this.qiniu.token);
xhr.send(pic);
this.dialogImg = false;
}
})
})
},
fileSize(base64){
let fileSize;
//找到等号,把等号也去掉
if (base64.indexOf('=') > 0) {
var indexOf = base64.indexOf('=');
base64 = base64.substring(0, indexOf);//把末尾的’=‘号去掉
}
fileSize = parseInt(base64.length - (base64.length / 8) * 2);
return fileSize;
},
baseCode64(input){
var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = this._utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
_keyStr.charAt(enc3) + _keyStr.charAt(enc4);
}
return output;
},
_utf8_encode(string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
} else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
} else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
},
handleClose1(){
this.dialogImg = false;
},
realTime (data) {
this.previews = data
},
}
}
</script> <style lang='stylus' scoped>
.img{
width 500px
}
.dialogBox{
position:relative
height:640px
} .dialogBox .wrapper{
width:540px
height:540px
} .dialogBox .btn-box{
position:absolute
width:200px
right:0
bottom:0
}
.dialogBox .btn{
background:#e03434
color:#fff
font-size:14px
line-height:1
cursor:pointer
margin:0
white-space:nowrap
border:1px solid #ddd
border-radius:4px
padding:9px 15px
box-sizing: border-box
}
</style>
vue+七牛云 截图工具的更多相关文章
- 七牛云qshell工具定时备份空间文件到本地
qshell 是利用七牛文档上公开的 API实现的一个方便开发者测试和使用七牛API服务的命令行工具,使用该工具可以实现很多的功能,今天就分享一下利用qshell定时备份空间文件到本地 1.下载qsh ...
- 七牛云——qshell一个神奇的工具
前言 qshell是利用七牛文档上公开的API实现的一个方便开发者测试和使用七牛API服务的命令行工具.该工具设计和开发的主要目的就是帮助开发者快速解决问题.目前该工具融合了七牛存储,CDN,以及其他 ...
- markown编辑器截图粘贴预览,并将图片传至七牛云
最近在做一个项目,需要实现类似QQ截图后,就是能够在富文本编辑器中粘贴截图并预览. 先看一下效果: 分析一下实现步骤: QQ截图后在编辑器中粘贴,肯定会有一个粘贴事件,即 paste 事件 在事件回调 ...
- Linux下七牛云存储qrsync命令行上传同步工具
原址:https://m.aliyun.com/yunqi/ziliao/54370 VPS数据备份是一个重要的工作,之前在文章:使用七牛云存储自动备份VPS数据分享过使用七牛云存储提供的工具QRSB ...
- 【微信小程序】在微信开发工具上七牛云的图片可以看到,但是在真机上看不到的原因解决
在开发微信小程序过程中,在微信开发者工具上,七牛云的图片都可以展示出来,但是在真机上,七牛云的图片却展示不出来,也没有报404找不到或者不能加载图片的问题, 必须保证: 1.图片是用image加载的: ...
- 图床工具PicGO实现七牛云图片上传
图床工具PicGO实现七牛云图片上传 我们在写博客或者网络文章时经常需要上传图片.目前最有名气的图床工具就是PicGO. 简单的界面,完整的功能,在相册里也能直接复制markdown图片链接.一直深受 ...
- vue上传视屏或者图片到七牛云
首先下载七牛云的JavaScript-SDK npm install qiniu-js 下载完成JavaScript-SDK以后就可以上传图片信息了 <template> <div& ...
- iUploader 2.0 七牛云上传工具
iUploader 软件介绍: iUploader主要功能将文件上传至七牛云,返回 Markdown 格式的链接到剪贴板 功能介绍: 图片本地压缩 图片右键上传 图片截取上传 图片复制上传 图片拖拽上 ...
- 七牛云-上传、删除文件,工具类(Day49)
要求: 1. java1.8以上 2. Maven: 这里的version指定了一个版本范围,每次更新pom.xml的时候会尝试去下载7.5.x版本中的最新版本,你可以手动指定一个固定的版本. < ...
随机推荐
- 使用SQLAlchemy,以及问题处理
https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/0014021031294178 ...
- Ubuntu 文件和目录常用命令
目标 查看目录内容 ls 切换目录 cd 创建和删除操作 touch rm mkdir 拷贝和移动文件 cp mv 查看文件内容 cat more grep 其他 echo 重定向 > 和 &g ...
- linux 基础10-磁盘配额管理
1. 基本概念 1.1 概念: 在linux系统中,由于是多人多任务的使用环境,所以会有多人共同使用一个硬盘空间的情况,如果其中少数几个人大量使用了硬盘空间的话,势必会压缩其他使用者的使用空间,因此管 ...
- 访问mapper方法提示invalid bound statement (not found)原因总结
1.访问所有的mapper都报此错误,检查 mapper.xml 中的 namespace 2.访问mapper中的部分方法时报此错误,检查xml文件中的id是否和接口中的方法名一致 3.mapper ...
- Linux下的帮助命令(man/help/info)
1.man 帮助命令 用法 man(选项)(参数) 选项 -a:在所有的man帮助手册中搜索: -f:等价于whatis指令,显示给定关键字的简短描述信息: -P:指定内容时使用分页程序: -M:指定 ...
- 系统---《windows + ubuntu双系统》
安装 Windows + Ubuntu双系统 不是第一次安装 Windows + Ubuntu双系统了,每一遇见的问题都不一样,收获也不一样. 制作U盘的部分截图: 电脑的基本配置截图:
- es相关
1.es在数据量很大的情况下(数十亿级别)如何提高查询性能啊? 2.es生产集群的部署架构是什么?每个索引的数据量大概有多少?每个索引大概有多少个分片? 3.es的分布式架构原理能说一下么(es是如何 ...
- 关于operator void* 操作符
在<大规模C++程序设计>这本书中谈到了迭代器模式. 他提供了这样的一个迭代器的例子 这个for循环中判断终止的写法,有点意思,做一下记录. 这个地方的本质是这样的:C++ 编译器 ...
- 一步一步pwn路由器之rop技术实战
前言 本文由 本人 首发于 先知安全技术社区: https://xianzhi.aliyun.com/forum/user/5274 这次程序也是 DVRF 里面的,他的路径是 pwnable/She ...
- javaMail 详解
原文:http://www.matrix.org.cn/resource/article/44/44101_JavaMail.html 一.JavaMail API简介JavaMail API是读取. ...