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 ...
随机推荐
- ELK整合Filebeat监控nginx日志
ELK 日志分析 1. 为什么用到 ELK 一般我们需要进行日志分析场景:直接在日志文件中 grep. awk 就可以获得自己想要的信息.但在规模较大的场景中,此方法效率低下,面临问题包括日志量太大如 ...
- OpenCV feature2d
/*M/////////////////////////////////////////////////////////////////////////////////////// // // IMP ...
- Oracle Like子句
Oracle Like子句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,您将学习如何使用Oracle LIKE运算符来测试列中的值是否与指定 ...
- Redis的消息订阅/发布 Utils工具类
package cn.cicoding.utils; import org.json.JSONException; import org.json.JSONObject; import redis.c ...
- [转]Linux下防止进程使用swap及防止OOM机制导致进程被kill掉
首先解释两个概念:swap:在linux里面,当物理内存不够用了,而又有新的程序请求分配内存,那么linux就会选择将其他程序暂时不用的数据交换到物理磁盘上(swap out),等程序要用的时候再读进 ...
- 基于GTID模式MySQL主从复制
基于GTID模式MySQL主从复制 GTID复制原理:基于GTID的复制是MySQL 5.6后新增的复制方式GTID (global transaction identifier) 即全局事务ID, ...
- xml json mongo
w wuser@ubuntu:~/apiamzpy$ sudo pip install xmljson
- sqlserver通过select查询出连续的日历临时表
首先我们需要用到这个 select * FROM master..spt_values n WHERE n.type = 'p' AND n.number <= 7 里面分几个列,我们需要连续的 ...
- 用Vue来实现音乐播放器(十六):滚动列表的实现
滚动列表是一个基础组件 他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件 <template> < ...
- 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第4节 ArrayList集合_13-ArrayList集合概述和基本使用
新建类 多了个尖括号,大写字母E,这是什么意思呢? 尖括号当中叫做泛型.存储的统一的类型,这个类型就在尖括号里面写上,我们用一个字母占位表示. 如何创建呢 构造方法有三个,最常用的就是无参构造 先掌握 ...