Front-end image to base64, format, blob, upload summary

1. Convert image files to 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;
						
					}
				});
			});

This gets the base64 encoding of the image file

You can set base64 directly to the src attribute of img for image echo

2. canvas image processing

2.1 Canvas drawing pictures and compressing pictures

var suofang = function(base64, bili, callback) {
	console.log("Execute the zoom program, bili=" + bili);
	//Handle scaling, convert format
	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);
	}
}

Compressing pictures is mainly to reduce the picture by scaling the length and width

2.2 canvas to base64

var base64 = canvas.toDataURL("image/png");

You can also pass a parameter to set the picture quality, 0-1

2.3 Canvas to blob

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

2.4 base to 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. File upload

1. base64 upload

You can use an ajax request to send a normal request.

It should be noted that because the base64 is relatively long, it is found that the parameter received by the java backend is null after the test. So use JSON.stringify() to convert the data data into json, and accept it with @requestBody on the backend

2. Blog upload

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

		}
	});

Finally, attach the complete code < image upload - transfer base64 - zoom - transfer format - zoom to no more than 1M - ajax upload >

• html

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

• Business code

$(function() {
	$("#up").change(function() {
		imageDeal(this, dealChange);
	});
})
var dealChange = function (blob, base64) {
	var fd = new FormData();
	fd.append("file", blob); //fileData is custom   
	$.ajax({
		type: "post",
		url: "/file/upload",
		async: true,
		data: fd,
		processData: false,
		contentType: false,
		success: function(r) {

		}
	});
}

• processing code

var imageDeal = function(ele, returnBase64) {
	//Get file and convert to base64
	var file = ele.files[0]; //Get the first file passed in
	if(undefined == file) { //If the file is not found, end the function and jump out
		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("Before compression: " + base64.length);
		suofang(base64, bili, returnBase64);
	}
}
var suofang = function(base64, bili, callback) {
	console.log("Execute the zoom program, bili=" + bili);
	//Handle scaling, convert format
	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");
	}
}