首页 >> js开发 >> jsvue在图片上传的时候压缩图片js大全
jsvue在图片上传的时候压缩图片js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
需求：需求：上传到服务器的图片太大会导致服务器承受不了，故在前端传图片的时候将图片压缩后再传到服务器直接上代码直接上代码
async getRealName(){
let nickname = this.nickname.trim()
let idnum = this.idnum.trim()
let nameReg = /[\u4e00-\u9fa5]/gm
let idnumReg = /^[a-z0-9]+$/i
let zheng1 = document.getElementById("file1").files[0]
let fan1 = document.getElementById("file2").files[0]
if(nickname.length < 1) {
return Toast('请输入姓名')
}
if(idnum.length < 1) {
return Toast('请输入身份证号码')
}
if(!zheng1) {
return Toast('请上传身份证信息页')
}
if(!fan1) {
return Toast('请上传身份证国徽页')
}
if(zheng1.size/1024 > 1025) {
this.imgCompress(zheng1,{quality:0.2},'zheng')
}else {
this.zheng = zheng1
}
if(fan1.size / 1024 > 1025) {
this.imgCompress(fan1,{quality:0.2},'fan')
}else {
this.fan = fan1
}
setTimeout(()=>{
let data = new FormData()
data.append('nickname',nickname);//添加form表单中其他数据
data.append('idnum',idnum)
data.append('zheng',this.zheng,zheng1.name)
data.append("fan",this.fan,fan1.name)
let apiauth = localStorage.getItem('apiauth')
let config = {
headers:{'Content-Type':'multipart/form-data'},
herders:{apiauth:apiauth}
}
axios.post("http://api139.ys11.ipfsico.com/index/index/realname",data,config).then((res)=>{
Toast(res.data.msg)
if(res.data.code == 1) {
this.$router.replace({path:'/msite'})
}
})
},1000)
},
//图片压缩
imgCompress(path,obj,statu){
let _this = this //这里的this 是把vue的实例对象指向改变为_this
var img = new Image();
if(statu == 'zheng') {
img.src = _this.avatar1;
}else {
img.src = _this.avatar2
}
img.onload = function(){
var that = this; //这里的this 是把img的对象指向改变为that
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量
if(obj.quality && obj.quality <= 1 && obj.quality > 0){
quality = obj.quality;
}
// quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
var urlFile = _this.convertBase64UrlToBlob(base64) //这个地方的处理是为了把压缩的base64转化为对象，获得压缩后图片的大小size，方便对压缩后的图片再次进行判断；
// console.log(urlFile)
let file = _this.blobToFile(urlFile,path.name)
console.log(file)
if(statu == 'zheng') {
_this.zheng = file
}else {
_this.fan = file
}
if(urlFile.size/1024 > 1025){
Toast("图片过大，请重新上传图片")
}
}
},
convertBase64UrlToBlob(urlData){
var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
},
blobToFile(theBlob, fileName){
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
},
changeImage(e) {
console.log(e.target.files)
if(e.target.files[0]){
this.ownImg = false
var file = e.target.files[0];
console.log(file)
let filemaxsize = 4096
let size = file.size / 1024
if (size > filemaxsize){
Toast('您上传的图片过大,请重新选择')
this.disabled = true;
this.formatImg = false
return false
}
var name = file.name
var fileTypes = [".jpg", ".png"];
if(name) {
var isNext = false;
var fileEnd = name.substring(name.indexOf("."));
for (var i = 0; i < fileTypes.length; i++) {
if (fileTypes[i] == fileEnd) {
console.log(fileTypes[i])
isNext = true;
this.disabled = false;
this.formatImg = true;
break;
}
}
if (!isNext){
Toast('暂不支持该类型图片');
name = "";
this.disabled = true;
this.formatImg = false
return false;
}
}
var reader = new FileReader()
var that = this
var image = new Image()
reader.readAsDataURL(file)
reader.onload = function(e) {
that.avatar1 = this.result
}
}
},
changeImg(event){
var file = event.target.files[0]
var name = file.name
var fileTypes = [".jpg", ".png"];
if(name) {
var isNext = false;
var fileEnd = name.substring(name.indexOf("."));
for (var i = 0; i < fileTypes.length; i++) {
if (fileTypes[i] == fileEnd) {
console.log(fileTypes[i])
isNext = true;
this.disabled = false;
this.formatImg = true;
break;
}
}
if (!isNext){
Toast('暂不支持该类型图片');
name = "";
this.disabled = true;
this.formatImg = false
return false;
}
}
var reader = new FileReader()
var that = this
reader.readAsDataURL(file)
reader.onload = function(event) {
that.avatar2 = this.result
}
}
async getRealName(){
let nickname = this.nickname.trim()
let idnum = this.idnum.trim()
let nameReg = /[\u4e00-\u9fa5]/gm
let idnumReg = /^[a-z0-9]+$/i
let zheng1 = document.getElementById("file1").files[0]
let fan1 = document.getElementById("file2").files[0]
if(nickname.length < 1) {
return Toast('请输入姓名')
}
if(idnum.length < 1) {
return Toast('请输入身份证号码')
}
if(!zheng1) {
return Toast('请上传身份证信息页')
}
if(!fan1) {
return Toast('请上传身份证国徽页')
}
if(zheng1.size/1024 > 1025) {
this.imgCompress(zheng1,{quality:0.2},'zheng')
}else {
this.zheng = zheng1
}
if(fan1.size / 1024 > 1025) {
this.imgCompress(fan1,{quality:0.2},'fan')
}else {
this.fan = fan1
}
setTimeout(()=>{
let data = new FormData()
data.append('nickname',nickname);//添加form表单中其他数据
data.append('idnum',idnum)
data.append('zheng',this.zheng,zheng1.name)
data.append("fan",this.fan,fan1.name)
let apiauth = localStorage.getItem('apiauth')
let config = {
headers:{'Content-Type':'multipart/form-data'},
herders:{apiauth:apiauth}
}
axios.post("http://api139.ys11.ipfsico.com/index/index/realname",data,config).then((res)=>{
Toast(res.data.msg)
if(res.data.code == 1) {
this.$router.replace({path:'/msite'})
}
})
},1000)
},
//图片压缩
imgCompress(path,obj,statu){
let _this = this //这里的this 是把vue的实例对象指向改变为_this
var img = new Image();
if(statu == 'zheng') {
img.src = _this.avatar1;
}else {
img.src = _this.avatar2
}
img.onload = function(){
var that = this; //这里的this 是把img的对象指向改变为that
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量
if(obj.quality && obj.quality <= 1 && obj.quality > 0){
quality = obj.quality;
}
// quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
var urlFile = _this.convertBase64UrlToBlob(base64) //这个地方的处理是为了把压缩的base64转化为对象，获得压缩后图片的大小size，方便对压缩后的图片再次进行判断；
// console.log(urlFile)
let file = _this.blobToFile(urlFile,path.name)
console.log(file)
if(statu == 'zheng') {
_this.zheng = file
}else {
_this.fan = file
}
if(urlFile.size/1024 > 1025){
Toast("图片过大，请重新上传图片")
}
}
},
convertBase64UrlToBlob(urlData){
var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
},
blobToFile(theBlob, fileName){
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
},
changeImage(e) {
console.log(e.target.files)
if(e.target.files[0]){
this.ownImg = false
var file = e.target.files[0];
console.log(file)
let filemaxsize = 4096
let size = file.size / 1024
if (size > filemaxsize){
Toast('您上传的图片过大,请重新选择')
this.disabled = true;
this.formatImg = false
return false
}
var name = file.name
var fileTypes = [".jpg", ".png"];
if(name) {
var isNext = false;
var fileEnd = name.substring(name.indexOf("."));
for (var i = 0; i < fileTypes.length; i++) {
if (fileTypes[i] == fileEnd) {
console.log(fileTypes[i])
isNext = true;
this.disabled = false;
this.formatImg = true;
break;
}
}
if (!isNext){
Toast('暂不支持该类型图片');
name = "";
this.disabled = true;
this.formatImg = false
return false;
}
}
var reader = new FileReader()
var that = this
var image = new Image()
reader.readAsDataURL(file)
reader.onload = function(e) {
that.avatar1 = this.result
}
}
},
changeImg(event){
var file = event.target.files[0]
var name = file.name
var fileTypes = [".jpg", ".png"];
if(name) {
var isNext = false;
var fileEnd = name.substring(name.indexOf("."));
for (var i = 0; i < fileTypes.length; i++) {
if (fileTypes[i] == fileEnd) {
console.log(fileTypes[i])
isNext = true;
this.disabled = false;
this.formatImg = true;
break;
}
}
if (!isNext){
Toast('暂不支持该类型图片');
name = "";
this.disabled = true;
this.formatImg = false
return false;
}
}
var reader = new FileReader()
var that = this
reader.readAsDataURL(file)
reader.onload = function(event) {
that.avatar2 = this.result
}
}以上就是vue在图片上传的时候压缩图片的详细内容，关于vue 压缩图片的资料请关注其它相关文章！
async getRealName(){
let nickname = this.nickname.trim()
let idnum = this.idnum.trim()
let nameReg = /[\u4e00-\u9fa5]/gm
let idnumReg = /^[a-z0-9]+$/i
let zheng1 = document.getElementById("file1").files[0]
let fan1 = document.getElementById("file2").files[0]
if(nickname.length < 1) {
return Toast('请输入姓名')
}
if(idnum.length < 1) {
return Toast('请输入身份证号码')
}
if(!zheng1) {
return Toast('请上传身份证信息页')
}
if(!fan1) {
return Toast('请上传身份证国徽页')
}
if(zheng1.size/1024 > 1025) {
this.imgCompress(zheng1,{quality:0.2},'zheng')
}else {
this.zheng = zheng1
}
if(fan1.size / 1024 > 1025) {
this.imgCompress(fan1,{quality:0.2},'fan')
}else {
this.fan = fan1
}
setTimeout(()=>{
let data = new FormData()
data.append('nickname',nickname);//添加form表单中其他数据
data.append('idnum',idnum)
data.append('zheng',this.zheng,zheng1.name)
data.append("fan",this.fan,fan1.name)
let apiauth = localStorage.getItem('apiauth')
let config = {
headers:{'Content-Type':'multipart/form-data'},
herders:{apiauth:apiauth}
}
axios.post("http://api139.ys11.ipfsico.com/index/index/realname",data,config).then((res)=>{
Toast(res.data.msg)
if(res.data.code == 1) {
this.$router.replace({path:'/msite'})
}
})
},1000)
},
//图片压缩
imgCompress(path,obj,statu){
let _this = this //这里的this 是把vue的实例对象指向改变为_this
var img = new Image();
if(statu == 'zheng') {
img.src = _this.avatar1;
}else {
img.src = _this.avatar2
}
img.onload = function(){
var that = this; //这里的this 是把img的对象指向改变为that
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量
if(obj.quality && obj.quality <= 1 && obj.quality > 0){
quality = obj.quality;
}
// quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
var urlFile = _this.convertBase64UrlToBlob(base64) //这个地方的处理是为了把压缩的base64转化为对象，获得压缩后图片的大小size，方便对压缩后的图片再次进行判断；
// console.log(urlFile)
let file = _this.blobToFile(urlFile,path.name)
console.log(file)
if(statu == 'zheng') {
_this.zheng = file
}else {
_this.fan = file
}
if(urlFile.size/1024 > 1025){
Toast("图片过大，请重新上传图片")
}
}
},
convertBase64UrlToBlob(urlData){
var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
},
blobToFile(theBlob, fileName){
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
},
changeImage(e) {
console.log(e.target.files)
if(e.target.files[0]){
this.ownImg = false
var file = e.target.files[0];
console.log(file)
let filemaxsize = 4096
let size = file.size / 1024
if (size > filemaxsize){
Toast('您上传的图片过大,请重新选择')
this.disabled = true;
this.formatImg = false
return false
}
var name = file.name
var fileTypes = [".jpg", ".png"];
if(name) {
var isNext = false;
var fileEnd = name.substring(name.indexOf("."));
for (var i = 0; i < fileTypes.length; i++) {
if (fileTypes[i] == fileEnd) {
console.log(fileTypes[i])
isNext = true;
this.disabled = false;
this.formatImg = true;
break;
}
}
if (!isNext){
Toast('暂不支持该类型图片');
name = "";
this.disabled = true;
this.formatImg = false
return false;
}
}
var reader = new FileReader()
var that = this
var image = new Image()
reader.readAsDataURL(file)
reader.onload = function(e) {
that.avatar1 = this.result
}
}
},
changeImg(event){
var file = event.target.files[0]
var name = file.name
var fileTypes = [".jpg", ".png"];
if(name) {
var isNext = false;
var fileEnd = name.substring(name.indexOf("."));
for (var i = 0; i < fileTypes.length; i++) {
if (fileTypes[i] == fileEnd) {
console.log(fileTypes[i])
isNext = true;
this.disabled = false;
this.formatImg = true;
break;
}
}
if (!isNext){
Toast('暂不支持该类型图片');
name = "";
this.disabled = true;
this.formatImg = false
return false;
}
}
var reader = new FileReader()
var that = this
reader.readAsDataURL(file)
reader.onload = function(event) {
that.avatar2 = this.result
}
}
async getRealName(){
let nickname = this.nickname.trim()
let idnum = this.idnum.trim()
let nameReg = /[\u4e00-\u9fa5]/gm
let idnumReg = /^[a-z0-9]+$/i
let zheng1 = document.getElementById("file1").files[0]
let fan1 = document.getElementById("file2").files[0]
if(nickname.length < 1) {
return Toast('请输入姓名')
}
if(idnum.length < 1) {
return Toast('请输入身份证号码')
}
if(!zheng1) {
return Toast('请上传身份证信息页')
}
if(!fan1) {
return Toast('请上传身份证国徽页')
}
if(zheng1.size/1024 > 1025) {
this.imgCompress(zheng1,{quality:0.2},'zheng')
}else {
this.zheng = zheng1
}
if(fan1.size / 1024 > 1025) {
this.imgCompress(fan1,{quality:0.2},'fan')
}else {
this.fan = fan1
}
setTimeout(()=>{
let data = new FormData()
data.append('nickname',nickname);//添加form表单中其他数据
data.append('idnum',idnum)
data.append('zheng',this.zheng,zheng1.name)
data.append("fan",this.fan,fan1.name)
let apiauth = localStorage.getItem('apiauth')
let config = {
headers:{'Content-Type':'multipart/form-data'},
herders:{apiauth:apiauth}
}
axios.post("http://api139.ys11.ipfsico.com/index/index/realname",data,config).then((res)=>{
Toast(res.data.msg)
if(res.data.code == 1) {
this.$router.replace({path:'/msite'})
}
})
},1000)
},
//图片压缩
imgCompress(path,obj,statu){
let _this = this //这里的this 是把vue的实例对象指向改变为_this
var img = new Image();
if(statu == 'zheng') {
img.src = _this.avatar1;
}else {
img.src = _this.avatar2
}
img.onload = function(){
var that = this; //这里的this 是把img的对象指向改变为that
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量
if(obj.quality && obj.quality <= 1 && obj.quality > 0){
quality = obj.quality;
}
// quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
var urlFile = _this.convertBase64UrlToBlob(base64) //这个地方的处理是为了把压缩的base64转化为对象，获得压缩后图片的大小size，方便对压缩后的图片再次进行判断；
// console.log(urlFile)
let file = _this.blobToFile(urlFile,path.name)
console.log(file)
if(statu == 'zheng') {
_this.zheng = file
}else {
_this.fan = file
}
if(urlFile.size/1024 > 1025){
Toast("图片过大，请重新上传图片")
}
}
},
convertBase64UrlToBlob(urlData){
var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
},
blobToFile(theBlob, fileName){
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
},
changeImage(e) {
console.log(e.target.files)
if(e.target.files[0]){
this.ownImg = false
var file = e.target.files[0];
console.log(file)
let filemaxsize = 4096
let size = file.size / 1024
if (size > filemaxsize){
Toast('您上传的图片过大,请重新选择')
this.disabled = true;
this.formatImg = false
return false
}
var name = file.name
var fileTypes = [".jpg", ".png"];
if(name) {
var isNext = false;
var fileEnd = name.substring(name.indexOf("."));
for (var i = 0; i < fileTypes.length; i++) {
if (fileTypes[i] == fileEnd) {
console.log(fileTypes[i])
isNext = true;
this.disabled = false;
this.formatImg = true;
break;
}
}
if (!isNext){
Toast('暂不支持该类型图片');
name = "";
this.disabled = true;
this.formatImg = false
return false;
}
}
var reader = new FileReader()
var that = this
var image = new Image()
reader.readAsDataURL(file)
reader.onload = function(e) {
that.avatar1 = this.result
}
}
},
changeImg(event){
var file = event.target.files[0]
var name = file.name
var fileTypes = [".jpg", ".png"];
if(name) {
var isNext = false;
var fileEnd = name.substring(name.indexOf("."));
for (var i = 0; i < fileTypes.length; i++) {
if (fileTypes[i] == fileEnd) {
console.log(fileTypes[i])
isNext = true;
this.disabled = false;
this.formatImg = true;
break;
}
}
if (!isNext){
Toast('暂不支持该类型图片');
name = "";
this.disabled = true;
this.formatImg = false
return false;
}
}
var reader = new FileReader()
var that = this
reader.readAsDataURL(file)
reader.onload = function(event) {
that.avatar2 = this.result
}
}以上就是vue在图片上传的时候压缩图片的详细内容，关于vue 压缩图片的资料请关注其它相关文章！
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
