Input upload photo rotation solution

Time:2020-12-3

The requirement is simple: H5 takes photos, uploads photos, and displays them
The problem is: the uploaded pictures can be displayed normally on PC and IOS, while the pictures displayed on Android are rotated by 90 degrees.


Direct code
After passing in the image, the following information will be removed from the exfile method. With this method, you can ensure that the PC, IOS, and Android end display normal pictures.

    function removePicExif(file) {
      return new Promise((reslove) => {
        if (file) {
            let reader = new FileReader();
            let image = new Image();
            reader.onload = function (ev) {
              image.src = ev.target.result;
              image.onload = function () {
                const ctxWidth = this.width;
                const ctxHeight = this.height;
                const canvas = document.createElement("canvas");
                const ctx = canvas.getContext("2d");
                canvas.width = ctxWidth;
                canvas.height = ctxHeight;
                ctx.drawImage(this, 0, 0, ctxWidth, ctxHeight);
                canvas.toBlob((blob) => {
                  const newFile = new File([blob], file.name, {
                    type: "image/jpeg",
                    lastModified: Date.now(),
                  });
                  reslove(newFile)
                });
              };
            };
            reader.readAsDataURL(file);
          }
      })
    }

Now let me talk about my research
It was found that the uploaded pictures taken vertically by the mobile phone will be rotated in Android. After checking a lot of data, the same thing is to get the EXIF information of the picture, and then use canvas to rotate to the right direction.
However, in the actual test, I found that I didn’t need to use canvas to rotate again.
You can take out the mobile phone to take a picture, in the vertical vertical shooting situation, the picture taken is normal. In the case of vertical portrait, the picture taken is also in the same direction as the vertical portrait.
In a vertical situation, whether you take horizontal, vertical, or backward pictures, the direction of the pictures taken is always in the vertical direction. It is not because you hold the mobile phone backwards, and the photos taken by the mobile phone are inverted


Input upload photo rotation solution
This is a vertical shot
Input upload photo rotation solution
This is a vertical portrait
In a vertical situation, how do you hold your mobile phone? The direction of shooting is the same



So, in fact, the mobile phone has helped us to rotate to the right direction when shooting, so we don’t need to rotate any more. However, the photo information still retains the shooting direction of the photo. Therefore, on Android, Android automatically rotates according to the shooting direction again. As a result, it turns around, resulting in the wrong display of Android pictures.


So, all we have to do is cancel the EXIF information, not rotate it.


Small colored eggs, in fact, it is basically over here. However, under the horizontal situation, what is the situation of mobile phone photographing
When your mobile phone is parallel to the ground and you take pictures of the ground, you will find that the photos taken are the original appearance, and the photos are taken horizontally and vertically. The photo is vertical. The mobile phone has not been processed. Why do you think it is

Recommended Today

Comparison of several methods to get data from Internet in IOS

There are three ways to obtain network data in IOS: 1. Nsurlcondition 2. Nsurlsession 3. Three party library afnetworking Nsurlsession is Apple’s substitute for nsulrcondition. Nsurlsession is more than nsulrcondition 1. Configurable data information: nsurlsession configuration. Nsurlsession configuration enables you to set the data you want to request. For general settings such as caching, you […]