Shulou(Shulou.com)06/02 Report--

This article mainly explains the "web front-end image compression, direction correction, preview, upload plug-in method is what", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "web front-end picture compression, direction correction, preview, upload plug-in method is what" it!

Realization principle

Compress the image and upload it mainly using filereader, canvas and formdata H6 api and plug-in EXIF.js. Logic is not difficult. The whole process is:

(1) when users upload pictures using input file, use filereader to read the image data uploaded by users (base64 format)

   (2) passes the picture data into the img object, then draws the img to canvas, corrects the picture direction with EXIF.js, then calls canvas.toDataURL to compress the picture, obtains the compressed base64 format picture data, and converts it into binary.

   (3) gets the binary data of the compressed image and previews it.

   (4) plugs the compressed image binary data into formdata, and then submits the formdata through XmlHttpRequest.

In these four steps, the compression, orientation correction, preview and upload of the image are completed.

Thoughts on plug-in Design

Considering that in the actual project, different development frameworks (vue.js/JQ/react.js/angular.js/anu.js, etc.) may be used, the UI style of image preview may also be different, and the method of uploading image data may be different. Because the logic variability of image compression and direction correction is relatively low, we extract the image compression and direction correction here and package them into an plug-in library.

[1] get picture data

First, get the image data, that is, listen to the change event of input file, then get the file object files used to compress and upload, and transmit the files to the [Image Compression and orientation Correction plug-in] for processing.

At this time, according to everyone's needs, you can also preview uncompressed pictures.

/ / listen to the onchange event of the upload component input, compress the image, correct the picture direction, and get the compressed image filechooser.onchange = function () {var fileList = this.files; / / preview the pre-compressed image var files = Array.prototype.slice.call (fileList); files.forEach (function (file, I) {var reader = new FileReader () Reader.onload = function () {var li = document.createElement ("li") li.style.backgroundImage = 'url (' + this.result+')'; document.querySelector ('.img _ list') .appendChild (li)} reader.readAsDataURL (file);}) / / process the picture list. GetCompressiveFileList accepts the processed picture data list / / the following two lines of code are the use of the plug-in for image compression and direction correction. For more details, please continue to read ~ _ ~ ↓↓↓ var process = window.lzImgProcess (); process (fileList, getCompressiveFileList);}

[2] implementation of image compression and direction correction plug-in

After the above image data acquisition, you can do process compression method of the picture. And the compressed picture is not directly to draw the picture to canvas and then call toDataURL.

In IOS, there are two restrictions on canvas drawing:

The first is the size of the picture. If the size of the picture is more than 2 million pixels, the picture cannot be drawn to canvas. There is no error when you call drawImage, but you get empty image data when you use toDataURL to obtain image data.

In addition, there is a limit to the size of the canvas. If the size of the canvas is greater than about 5 million pixels (that is, the width-height product), not only the picture can not be drawn, but nothing else can be drawn.

To deal with the above two restrictions, I keep the width and height of the image within 1000px, so that the maximum size of the image is no more than 2 million pixels. In front-end development, 1000px*1000px can basically meet most of the needs. Of course, there are more perfect tile rendering methods, which we will talk about here.

This solves two limitations on IOS.

In addition to the restrictions mentioned above, there are two other pits. One is that the toDataURL of canvas can only compress jpg (for a detailed explanation of this sentence, see Tip below). When the image uploaded by users is png, it needs to be converted to jpg, that is, the unified use of canvas.toDataURL ('image/jpeg', 0.5), the type is set to jpeg, and the compression ratio is controlled by yourself.

The other is that if png is converted to jpg and there is a transparent area in canvas when drawn on canvas, the transparent area will turn black when converted to jpg, because the transparent pixel of canvas defaults to rgba (0mem0), so the conversion to jpg will become rgba (0L0), that is, the transparent background will become black. The solution is to put a white background on the canvas before drawing.

Before compressing the picture, we judge the angle of the picture, and if the angle of the picture is incorrect, we also need to correct the angle of the picture with EXIF.js.

After the picture is compressed, the picture data of base64 is converted into binary data and stored in the temporary storage area, waiting to be used by getBlobList.

Tip: I may not be clear about the sentence that canvas's toDataURL can only compress jpg. What I want to say is that this api, whether it is jpeg or png, is no different from jpeg when it is finally exported. Because the transparent nature of png images is invalid in canvas, it will be added by canvas with a default black background. When I explained in this article, I used a white background to deal with, so the final exported image, whether you set png or jpeg, is no different from jpeg, because it is impossible to maintain the transparency of png.

(function (window) {/ * * author: chaos Legend * * email address: iot-pro_lizeng@foxmail.com * * date: 2017-10-26 * * plug-in function: compress image & & correct picture direction & & return a list of binary (Blob) image metadata * * / window.lzImgProcess = function () {var Orientation ='' / / Picture bearing blobList = [], / / compressed binary picture data list canvas = document.createElement ("canvas"), / / canvas ctx = canvas.getContext ('2d') for compressing the picture (correcting the picture direction), file_type =' image/jpeg', / / Picture Type qlty = 0.5, / / Image compression quality The default is 0. 5. The optional range is 0-1. ImgWH = 1000 / / the maximum width and height of the compressed image. Default is 1000px, configurable / * * @ actionName process, * method function: compress image & & correct picture direction & & return binary (Blob) image metadata * * @ param fileList, pass in the file list object of the function The fileList object comes from the FileList object returned after the user selects a file on an element * Note: the image type must be jpeg | | png * for example:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.