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

This article "send ajax request how to upload pictures displayed on the web page" most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "send ajax request how to upload pictures displayed on the web page" article.

Preface

When you take and upload pictures on your phone through the input tag on the web, some phones will have the problem of rotating the picture 90 degrees d, including iPhone and individual Samsung phones. This problem occurs only when these phones are taken vertically, and the horizontal photos are displayed normally. Therefore, the photo can be rotated by obtaining the photo angle of the mobile phone, so as to solve this problem.

Orientation

This parameter is not available in all pictures, but pictures taken by mobile phones have this parameter. Rotation angle parameter value 0 °1

Clockwise 90 °6

Counterclockwise 90 °8

180 °3

When the parameter is 1, the display is normal, then on these horizontal beats, that is, Orientation=1 phones, the vertical beat parameter is 6.

To get the Orientation parameter, you can do it through the exif.js library. Exif.js has a lot of functions and a large volume, which has a full 30k before compression, which has a great impact on the loading of mobile phone pages. I just need to get the Orientation information, so I've deleted some code from the exif.js library here and narrowed it down to a few KB.

Exif.js gets Orientation: EXIF.getData (file, function () {

Var Orientation=EXIF.getTag (this, 'Orientation')

})

File is the file uploaded by the input file form. The uploaded file can be previewed through fileReader.readAsDataURL (file). What is not clear can be viewed: HTML5 Advanced Series: file upload and download

Rotate

Rotation requires the rotate () method of canvas. Ctx.rotate (angle)

The parameter of the rotate method is the rotation Radian. Need to convert the angle to radians: degrees * Math.PI / 180

The center point of the rotation defaults to the starting point of the canvas, that is, (0,0). The principle of rotation is shown in the following figure:

Rotate schematic diagram

After rotation, if drawImage () is performed from point (0,0), then the position drawn is the position after the rotation of 90 degrees on the left, not in the visual area. After rotation, the axis rotates with it. In order to display in the visual area, you need to move the (0,0) point to the opposite direction of the y axis by y units, and the starting point is (0,-y).

Similarly, it can be obtained that the starting point is (- x, 0) after rotation of-90 degrees and (- x,-y) after rotation of 180 degrees.

Compress

The photos taken by the phone are too large, and the photos encoded in base64 will be larger than the original photos, so it is necessary to compress them when uploading. Nowadays, the pixels of mobile phones are so high that the photos taken are thousands of pixels wide and high, so the speed of rendering this photo with canvas will be relatively slow.

Therefore, the first step is to limit the width and height of the uploaded photo and determine whether the width or height exceeds which range, then compress its width and height proportionally. Var ratio=width / height;if (imgWidth > imgHeight & & imgWidth > xx) {

ImgWidth=xx

ImgHeight=Math.ceil (xx / ratio)

} else if (imgWidth

Yy) {

ImgWidth=Math.ceil (yy * ratio)

ImgHeight=yy

}

The second step is to compress the photo quality through the canvas.toDataURL () method. Canvas.toDataURL ("image/jpeg", 1)

The toDataURL () method returns a data URI containing the image display. Use two parameters, the first of which is in image format and defaults to image/png. The second parameter is the compression quality. If you specify the image format as image/jpeg or image/webp, you can select the quality of the picture in the range from 0 to 1.

The above is about the content of this article on "how to send an ajax request to upload pictures and display them on the web page". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.