前端图片转base64,转格式,转blob,上传的总结

1. 图片文件转base64

<input accept="image/gif,image/jpeg,image/jpg,image/png" type="file" id="up" />

$(function() {
				$("#up").change(function() {
					var file = this.files[0];
					if(undefined == file){
						return ;
					}
					r = new FileReader(); 
					r.readAsDataURL(file); 
					r.onload = function(e) {
						var base64 = e.target.result;
						
					}
				});
			});

这样就获取到了图片文件的base64编码

可以把base64直接设置给img的src属性,用做图片回显用

2. canvas图片处理

2.1 canvas绘制图片和压缩图片

var suofang = function(base64, bili, callback) {
	console.log("执行缩放程序,bili=" + bili);
	//处理缩放,转格式
	var _img = new Image();
	_img.src = base64;
	_img.onload = function() {
		var _canvas = document.createElement("canvas");
		var w = this.width / bili;
		var h = this.height / bili;
		_canvas.setAttribute("width", w);
		_canvas.setAttribute("height", h);
		_canvas.getContext("2d").drawImage(this, 0, 0, w, h);
	}
}
压缩图片主要是通过长宽的缩放来缩小图片

2.2 canvas转base64

var base64 = canvas.toDataURL("image/png");
还可以传个参数做图片质量的设置,0-1

2.3 canvas转blob

_canvas.toBlob(function(blob) {
			console.log(blob.size);
		}, "image/jpeg");

2.4 base转blob

function dataURItoBlob(base64Data) {
	var byteString;
	if(base64Data.split(',')[0].indexOf('base64') >= 0)
		byteString = atob(base64Data.split(',')[1]);
	else
		byteString = unescape(base64Data.split(',')[1]);
	var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
	var ia = new Uint8Array(byteString.length);
	for(var i = 0; i < byteString.length; i++) {
		ia[i] = byteString.charCodeAt(i);
	}
	return new Blob([ia], {
		type: mimeString
	});
}


3. 文件上传

1. base64上传

可以使用ajax请求,发送普通请求即可。
需要注意的是,由于base64比较长,在测试后发现java后端接受到的参数为null。所以使用JSON.stringify()把data数据转成json,在后端用@requestBody接受


2. blog上传

var fd = new FormData();
	fd.append("file", blob); //fileData为自定义   
	$.ajax({
		type: "post",
		url: "/file/upload",
		async: true,
		data: fd,
		processData: false,
		contentType: false,
		success: function(r) {

		}
	});

最后附上完整的代码< 图片上传-转base64-缩放-转格式-缩放到不超过1M-ajax上传>
  • html
<input accept="image/gif,image/jpeg,image/jpg,image/png" type="file" id="up" />


  • 业务代码
$(function() {
	$("#up").change(function() {
		imageDeal(this, dealChange);
	});
})
var dealChange = function(blob, base64) {
	var fd = new FormData();
	fd.append("file", blob); //fileData为自定义   
	$.ajax({
		type: "post",
		url: "/file/upload",
		async: true,
		data: fd,
		processData: false,
		contentType: false,
		success: function(r) {

		}
	});
}


  • 处理代码
var imageDeal = function(ele, returnBase64) {
	//获取file,转成base64
	var file = ele.files[0]; //取传入的第一个文件
	if(undefined == file) { //如果未找到文件,结束函数,跳出
		return;
	}
	console.log("fileSize" + file.size);
	console.log(file.type);

	var r = new FileReader();
	r.readAsDataURL(file);
	r.onload = function(e) {
		var base64 = e.target.result;
		var bili = 1.5;
		console.log("压缩前:" + base64.length);
		suofang(base64, bili, returnBase64);
	}
}
var suofang = function(base64, bili, callback) {
	console.log("执行缩放程序,bili=" + bili);
	//处理缩放,转格式
	var _img = new Image();
	_img.src = base64;
	_img.onload = function() {
		var _canvas = document.createElement("canvas");
		var w = this.width / bili;
		var h = this.height / bili;
		_canvas.setAttribute("width", w);
		_canvas.setAttribute("height", h);
		_canvas.getContext("2d").drawImage(this, 0, 0, w, h);
		var base64 = _canvas.toDataURL("image/jpeg");
		_canvas.toBlob(function(blob) {
			console.log(blob.size);
			
			if(blob.size > 1024*1024){
				suofang(base64, bili, callback);
			}else{
				callback(blob, base64);
			}
		}, "image/jpeg");
	}
}


参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:精致技术 设计师:CSDN官方博客 返回首页

打赏作者

wzz没bug

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值