vue Base64图片压缩上传OSS
this.compress(result, 800, 0.5).then(val => {
//得到压缩图片
let data = val;
that.file = that.dataURLtoFile(data, that.file_name);
//上传
that.upload();
});
// 压缩图片
compress(base64String, w, quality) {
// var getMimeType = function(urlData) {
// var arr = urlData.split(",");
// var mime = arr[0].match(/:(.*?);/)[1];
// // return mime.replace("image/", "");
// return mime;
// };
var newImage = new Image();
var imgWidth, imgHeight; var promise = new Promise(resolve => (newImage.onload = resolve));
newImage.src = base64String;
return promise.then(() => {
imgWidth = newImage.width;
imgHeight = newImage.height;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w;
canvas.height = (w * imgHeight) / imgWidth;
} else {
canvas.height = w;
canvas.width = (w * imgWidth) / imgHeight;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
// var base64 = canvas.toDataURL(getMimeType(base64String), quality);
var base64 = canvas.toDataURL("image/jpeg", quality);
console.log(base64);
return base64;
});
}
dataURLtoFile(dataurl, filename) {
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
try {
return new File([u8arr], filename, { type: mime });
} catch (err) {
/**兼容iOS9.3或者Android4.4以下版本*/
console.warn(
"Browser does not support the File constructor,Will use blob instead of file"
);
return this.dataURL2blob(dataurl);
}
},
/**
* dataURL 转成 blob
* @param dataURL
* @return blob
*/
dataURL2blob(dataURL) {
let binaryString = atob(dataURL.split(",")[1]);
let arrayBuffer = new ArrayBuffer(binaryString.length);
let intArray = new Uint8Array(arrayBuffer);
let mime = dataURL.split(",")[0].match(/:(.*?);/)[1];
for (let i = 0, j = binaryString.length; i < j; i++) {
intArray[i] = binaryString.charCodeAt(i);
}
let data = [intArray];
let result;
try {
result = new Blob(data, { type: mime });
} catch (error) {
window.BlobBuilder =
window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobBuilder;
if (error.name === "TypeError" && window.BlobBuilder) {
var builder = new BlobBuilder();
builder.append(arrayBuffer);
result = builder.getBlob(type);
} else {
throw new Error("没救了");
}
}
return result;
},
async upload() {
try {
let that = this;
let params = { filename: that.file_name };
console.log(params.filename);
//获取签名
Api.barthday2.getsign(params).then(res => {
if (res.code == 0) {
that.uploadFile(res.data.Sign);
} else {
that.$toast.clear();
this.$toast(res.message);
}
});
} catch (err) {
that.$toast.clear();
that.$toast(err);
}
},
async uploadFile(url) {
let that = this;
let config = {
headers: {
"Content-Type": "application/octet-stream"
}
}; //添加请求头
this.$http
.put(url, this.file, config)
.then(response => {
//上传oss成功后把图片地址给服务器
})
.catch(res => {
that.$toast("抱歉,系统异常,上传失败!");
});
},
vue Base64图片压缩上传OSS的更多相关文章
- vue里图片压缩上传组件
//单图上传 <template> <div> <div class="uploader" v-if='!dwimg'> <van-upl ...
- 基于vue + axios + lrz.js 微信端图片压缩上传
业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
- js 图片压缩上传(base64位)以及上传类型分类
一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...
- 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)
涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...
- Html5+asp.net mvc 图片压缩上传
在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...
- 纯原生js移动端图片压缩上传插件
前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...
- 基于H5+ API手机相册图片压缩上传
// 母函数 function App(){} /** * 图片压缩,默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照 ...
- 分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片
2016-08-05更新: 下方的代码是比较OLD的了,是通过js进行图片的剪切 旋转 再生成,效率较低. 后来又整合了一个利用native.js本地接口的压缩代码 ,链接在这 .页面中有详细的说明, ...
- springMVC多图片压缩上传的实现
首先需要在配置文件中添加配置: <!--配置文件的视图解析器,用于文件上传,其中ID是固定的:multipartResolver--> <bean id="multipar ...
随机推荐
- mysql SELECT INTO语句 语法
mysql SELECT INTO语句 语法 作用:用于创建表的备份复件. 语法:SELECT * INTO new_table_name [IN externaldatabase] FROM ol ...
- #1126-JSP服务器响应
JSP服务器响应 Response响应对象主要将JSP容器处理后的结果传回到客户端.可以通过response变量设置HTTP的状态和向客户端发送数据,如Cookie.HTTP文件头信息等. 一个典型的 ...
- token与安全
http://ju.outofmemory.cn/entry/134189 关于 Token,你应该知道的十件事 https://blog.csdn.net/Fabulous1111/art ...
- [CSP-S模拟测试]:星际旅行(欧拉路)
题目传送门(内部题4) 输入格式 第一行两个整数$n,m$,表示行星和虫洞的数量.接下来$m$行,每行两个整数$u,v$,表示存在一个双向虫洞直接连接$u$和$v$.每一个虫洞最多会被描述一次. 输出 ...
- SpringBoot项目的前端+thymeleaf模板引擎
SpringBoot项目创建之后,后台的框架是SpringMVC.但前端的resource和template目录都是空的.这个时候需要创建前台页面. 习惯上,我们会创建JSP,但是,SpringBoo ...
- kubernetes-helm程序包管理器(二十)
helm概述 Helm是Kubernetes的包管理器,Helm 让我们能够像 yum 管理 rpm 包那样安装.部署.升级和删除容器化应用. Helm的核心术语: Chart:一个helm程序包,是 ...
- leetcode-mid-array-5. Longest Palindromic Substring
mycode 12.51% class Solution(object): def longestPalindrome(self, s): """ :type s: ...
- ES6模块与CommonJS模块的差异
ES6模块与CommonJS模块的差异 讨论 Node 加载 ES6模块之前,必须了解 ES6模块与 CommonJS模块完全不同. 它们有两个重大差异. CommonJS模块输出的是一个值的拷贝,E ...
- day50—JavaScript鼠标拖拽事件
转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...
- sklearn版本
10.19.0以前的sklearn版本才有cross_validation包,这个时候不要用model_selection导入StratifiedKFold,要用cross_validation,0. ...