summary:I was working on a small game platform project before, and there was a "User Center" module, which involved the function of uploading avatars. When uploading mobile pictures, the local pictures are all uploaded on the mobile phone, and the local pictures are generally relatively large. Take today's smartphones for example. Many pictures are usually taken in two or three trillion. If you upload them directly like this, the pictures will be too large. If the user uses mobile traffic, uploading the pictures completely is obviously not a good idea. Therefore, it is necessary to perform compression processing before uploading. After searching for a lot of information online, I tried many methods and encountered many pitfalls. For example, Android can successfully compress and upload pictures, but it cannot upload them on iOS. It took a long time to find the pitfalls of iOS. This kind of picture that has been proven to be feasible after practice. In the end, several megabytes of pictures can be compressed to within 200k required by our backend! Such a feasible method must be shown to everyone [ps: they are all made by pieced together by others, hehehe~].
At present, various new APIs of HTML5 have been well implemented on mobile webkits. According to the caniuse, the FileReader, Blob, and Formdata objects used in this demo have been implemented in most mobile browsers (safari 6.0+, android 3.0+), so directly compressing pictures on the front end has become a necessary function for uploading many mobile pictures.
The three h5 APIs are mainly used to compress pictures on the mobile terminal and upload them. Logic is not difficult. The whole process is:
(1) When a user uses the input file to upload pictures, use the filereader to read the image data uploaded by the user (base64 format)
(2) Pass the image data into the img object, then draw the img on the canvas, and then call to compress the image
(3) Obtain the compressed base64 format image data, convert it into binary and stuff it into formdata, and then submit the formdata through XmlHttpRequest.
In this three steps, the compression and upload of the picture can be completed.
It seems quite simple, but it is actually a bit pitfall. Next, we will analyze it directly with code:
【1】Get picture data
First, get the image data, that is, listen for the change event of the input file, then get the uploaded file object files, convert the files of the class array into an array, and then perform forEach traversal.
Then determine the file type, and if it is not a picture, it will not be processed. If it is an image, instantiate a filereader, read the uploaded file data in base64 format, judge the data length, and call the compress method for compression if the image is greater than 200KB, otherwise call the upload method for upload.
= function() {
if (!) return;
var files = ();
if ( > 9) {
alert("Only 9 pictures can be uploaded at the same time");
return;
}
(function(file, i) {
if (!/\/(?:jpeg|png|gif)/()) return;
var reader = new FileReader();
var li = ("li");
= '<div class="progress"><span></span></div>';
$(".img-list").append($(li));
= function() {
var result = ;
var img = new Image();
= result;
//If the image size is less than 200kb, upload it directly if ( <= maxsize) {
$(li).css("background-image", "url(" + result + ")");
img = null;
upload(result, , $(li));
return;
}
//After the image is loaded, it is compressed and uploaded if () {
callback();
} else {
= callback;
}
function callback() {
var data = compress(img);
$(li).css("background-image", "url(" + data + ")");
upload(data, , $(li));
img = null;
}
};
(file);
})
};
【2】Compressed pictures
After obtaining the image data above, you can compress the image compression method. And compressing images does not just draw the image to canvas and call toDataURL.
In IOS, there are two limitations for canvas to draw pictures:
First of all, the size of the image. If the size of the image exceeds two million pixels, the image cannot be drawn on canvas. There will be no error when calling drawImage, but when you use toDataURL to obtain the image data, the empty image data is obtained.
Furthermore, there is a limit on the size of canvas. If the size of canvas is greater than about five million pixels (i.e., width and height product), not only can the picture not be drawn, but nothing else can be drawn.
To deal with the first limitation, the solution is to draw tiles. Tile drawing means dividing the image into multiple pieces and drawing it on canvas. The way in my code is to divide the image into a size of 1 million pixels per piece and then draw it on canvas.
To deal with the second limitation, my solution is to appropriately compress the width and height of the picture. For the sake of safety in my code, the upper limit is set to be four million pixels. If the picture is greater than four million pixels, it will be compressed to less than four million pixels. Four-megapixel pictures should be enough, and they are 2000X2000 in width and height.
This solves the two restrictions on IOS.
In addition to the above limitations, there are two other pitfalls. One is that the toDataURL of canvas can only compress jpg. When the image uploaded by the user is png, it needs to be converted to jpg, that is, use ('image/jpeg', 0.1) and set the type to jpeg, and the compression ratio is controlled by yourself.
Another is that if you convert png to jpg and when you draw on canvas, if there is a transparent area in canvas, the transparent area will turn black when converted to jpg, because the transparent pixels of canvas default to rgba(0,0,0,0), so if converted to jpg, it will turn rgba(0,0,0,1), that is, the transparent background will turn black. The solution is to paint a white background on the canvas before.
function compress(img) {
var initSize = ;
var width = ;
var height = ;
//If the image is larger than four million pixels, calculate the compression ratio and press the size below 4 million var ratio;
if ((ratio = width * height / 4000000) > 1) {
ratio = (ratio);
width /= ratio;
height /= ratio;
} else {
ratio = 1;
}
= width;
= height;
//Put the base color = "#fff";
(0, 0, , );
//If the image pixel is greater than 1 million, use tile painting var count;
if ((count = width * height / 1000000) > 1) {
count = ~~((count) + 1); // Calculate how many pieces of tiles to be divided into //Calculate the width and height of each tile var nw = ~~(width / count);
var nh = ~~(height / count);
= nw;
= nh;
for (var i = 0; i < count; i++) {
for (var j = 0; j < count; j++) {
(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
(tCanvas, i * nw, j * nh, nw, nh);
}
}
} else {
(img, 0, 0, width, height);
}
//Perform minimum compression var ndata = ('image/jpeg', 0.1);
('Before compression:' + initSize);
('After compression:' + );
('Compression rate:' + ~~(100 * (initSize - ) / initSize) + "%");
= = = = 0;
return ndata;
}
【Three】Picture upload
After completing the image compression, you can stuff it into formdata for uploading. First convert the base64 data into a string, then instantiate an ArrayBuffer, then pass the string into the ArrayBuffer in an 8-bit integer format, and then convert the 8-bit integer ArrayBuffer into a binary object blob through a BlobBuilder or Blob object, then append the blob object to formdata, and then send it to the background through ajax.
XmlHttpRequest2 not only allows you to send big data, but also has an API for getting the sending progress, which has also been implemented in my code.
// Upload the picture, convert the base64 picture into a binary object, stuff it into formdata to uploadfunction upload(basestr, type, $li) {
var text = ((",")[1]);
var buffer = new ArrayBuffer();
var ubuffer = new Uint8Array(buffer);
var pecent = 0,
loop = null;
for (var i = 0; i < ; i++) {
ubuffer[i] = (i);
}
var Builder = || ;
var blob;
if (Builder) {
var builder = new Builder();
(buffer);
blob = (type);
} else {
blob = new ([buffer], {
type: type
});
}
var xhr = new XMLHttpRequest();
var formdata = new FormData();
('imagefile', blob);
('post', '/cupload');
= function() {
if ( == 4 && == 200) {
('Uploaded successfully:' + );
clearInterval(loop);
// Uploaded when the message is received $(".progress span").animate({
'width': "100%"
}, pecent < 95 ? 200 : 0, function() {
$(this).html("Uploaded successfully");
});
$(".pic-list").append('<a href="' + + '">' + + '<img src="' + + '" /></a>')
}
};
//The data sending progress, the first 50% of the progress is displayed ('progress', function(e) {
if (loop) return;
pecent = ~~(100 * / ) / 2;
$(".progress span").css('width', pecent + "%");
if (pecent == 50) {
mockProgress();
}
}, false);
//50% of the data are used to simulate progress function mockProgress() {
if (loop) return;
loop = setInterval(function() {
pecent++;
$(".progress span").css('width', pecent + "%");
if (pecent == 99) {
clearInterval(loop);
}
}, 100)
}
(formdata);
}
At this point, the entire uploaded front-end image compression is completed. Because it is submitted using formdata, the backend can handle the same data as the data submitted by ordinary form forms when receiving data.
The above example of compressing and uploading of mobile front-end pictures is all the content I share with you. I hope you can give you a reference and I hope you can support me more.