图片压缩并上传(file格式)

async afterRead(file) {
let name = file.file.name;
let type = file.file.type;
// 创建Canvas对象(画布)
let canvas = document.createElement(“canvas”);
// 获取对应的CanvasRenderingContext2D对象(画笔)
let context = canvas.getContext(“2d”);
// 创建新的图片对象
let img = new Image();
// 指定图片的DataURL(图片的base64编码数据)
img.src = file.content;
// 监听浏览器加载图片完成，然后进行进行绘制
img.onload =async () => {
// 指定canvas画布大小，该大小为最后生成图片的大小
canvas.width = 1200;
canvas.height = 900;
/* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/
context.drawImage(img, 0, 0, 1200, 900);
// 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
file.content = canvas.toDataURL(file.file.type, 0.92);
var blob = this.dataURLtoBlob(file.content);
var aasfile = this.blobToFile(blob, name);
var aafile = new File([aasfile], name, { type: type });
var formData = new FormData();
formData.append(“file”, aafile);
formData.append(“first”, true);
Toast.loading({
message: ‘上传中…’,
forbidClick: true,
duration:10000
});
try {
await axios.post(config2.api_url+"/common/ocr", formData).then(res => {
if (res.data.error == 0) {
let d = res.data.result;
let insertStr = (soure, start, newStr) => {
return soure.slice(0, start) + newStr + soure.slice(start);
};
let date = d.issueDate;
date = insertStr(date, 4, “-”);
date = insertStr(date, 7, “-”);
this.vehiclePath = d.imageUrl;
this.brand = d.brand;
this.registerDate = date;
this.engineNumber = d.engineNumber;
this.carNumber = d.numberPlate;
this.vin = d.vin;
this.getinfo = true;
Toast.clear();
}else{
Toast(res.data.msg);
setTimeout(() => {
Toast.clear();
}, 2000);
}
})
.catch(error => {
Toast(error);
Toast.clear();
});
} finally {
}
};
},

图片压缩并上传(file格式)相关推荐

js图片压缩后上传方法,图片超过1M先进行压缩，然后再上传
js图片压缩后上传方法,图片超过1M先进行压缩,然后再上传图片上传目录 js图片压缩后上传方法,图片超过1M先进行压缩,然后再上传 html代码 js代码 html代码 <input type ...
js图片压缩java上传,JS实现异步上传压缩图片
摘要: 使用iframe来处理异步上传图片,在现在这个时代来说,多多少少都有点落后了!单单就凭AJAX和JS就不能做到异步上传图片了吗? 先看调用页面: 选择图片 var img; $("i ...
android 快速实现图片压缩与上传
由于最近项目更新功能比较的忙,也没时间去整理自己的知识点和管理自己的博客.在android对手机相册中的图片的压缩和上传到服务器上,这样的功能在每个app开发中都会有这样的需求.所以今天就对andro ...
Vue 图片压缩并上传至服务器
本文主要讲解基于 Vue + Vant ,实现移动端图片选择,并用 Canvas 压缩图片,最后上传至服务器.还会封装一个工具类,方便直接调用. 一.工具类封装废话不多说先上代码,封装一个 Comp ...
Bmob+Luban（鲁班）压缩图片实现相册选择图片压缩后上传到Bmob后台Glide加载图片显示到本地
源代码已上传CSDN:https://download.csdn.net/download/qq_16519957/11068345 因为本章需要跟前面的知识结合起来看所以就做了一个前面链接方便大家查 ...
返回图片_Vue 图片压缩并上传至服务器
日常开发中经常会遇到上传图片的需求,随着手机的蓬勃发展,现在拍出来的照片分辨率越来越高,随之带来的问题就是图片占用空间越来越大,如果我们直接上传图片可能就会浪费很大一笔资源,本文主要讲解基于 Vue ...
前端获取图片压缩后上传给后台
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...
js 裁剪图片压缩并且上传图片
今天接到一个比较懒的后台的要求:后台要求在裁剪图片的同时,根据文件大小来按不同比例压缩图片. 页面代码 <!--** * *----------Created by 黄伟峰 on 2018/6/ ...
js图片压缩并上传？
js: var eleFile = document.querySelector('#file'); // 压缩图片需要的一些元素和对象 var reader = new FileReader(); ...

图片压缩并上传(file格式)

图片压缩并上传(file格式)相关推荐

最新文章

热门文章