I. Introduction to the H5 scenario

Requirements: H5 page is embedded in the APP. The page needs to call the native function of WebView to take photos and upload pictures, and finally get the photos and render them on the H5 page.

Second, problems encountered

1. Some Android phones will automatically rotate 90 degrees clockwise after taking photos. For example, Xiaomi MIX 2 (Android 9.0)

2, iPhone some ios system after taking photos render photos will automatically rotate clockwise 90 degrees, such as: ios13.4 before the system

Iii. Solutions

1. Read the metadata of the image with the help of exif. js plug-in, obtain the value of Orientation of the shooting direction of the image, and correct the position of the image according to the corresponding direction.

Exif. getTag(imgObj, "Orientation") // Get the shooting direction of the image, 1: normal, 6:90 degrees clockwise, 8: Rotate the picture 90 degrees counterclockwise, 3: rotate the picture 180 degrees, upside downCopy the code

2. Currently, only some mobile phones are found to have Orientation of 6, and the picture is rotated 90 degrees clockwise. The processing scheme is as follows

Function getCorrectImg(file) {let Orientation = 0; Let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = (e) => { let image = new Image(); image.src = e.target.result; // Get the photo Angle property, Image.onload = function () {exif.getData (image, function () {Orientation = exif.getTag (this, "Orientation"); Let rotateCanvas = document.createElement("canvas"); let rotateCtx = rotateCanvas.getContext("2d"); let rotateDegs = 0; Case 1: rotatecanvas.width = image.width; case 2: rotatecanvas.width; rotateCanvas.height = image.height; rotateCtx.drawImage(image, 0, 0, image.width, image.height); break; Case 6: let sy = 0; //ios 13.4 or higher will automatically correct portrait photography, So I need high compatible versions of ios / / all other equipment direction for 6 need to rotate it 90 degrees clockwise if ((isIOS () && compareVersion (getIosVer (), "13.4") < 0) | |! isIOS()) { rotateCanvas.width = image.height; rotateCanvas.height = image.width; rotateCtx.translate(0, 0); rotateDegs = (90 * Math.PI) / 180; sy = -image.height; } else { rotateCanvas.width = image.width; rotateCanvas.height = image.height; rotateCtx.rotate(rotateDegs); rotateCtx.drawImage(image, 0, sy, image.width, image.height); } break; Case 8: rotatecanvas.width = image.height; rotateCanvas.height = image.width; rotateCtx.translate(0, 0); rotateCtx.rotate((-90 * Math.PI) / 180); rotateCtx.drawImage(image, -image.width, 0 , image.width , image.height); break; Case 3: rotatecanvas. width = image.width; rotateCanvas.height = image.height; rotateCtx.translate(0, 0); rotateCtx.rotate(Math.PI); rotateCtx.drawImage(image, -image.width, -image.width , image.width , image.height); break; default: rotateCanvas.width = image.width; rotateCanvas.height = image.height; rotateCtx.drawImage(image, 0, 0, image.width, image.height); } return rotateCanvas. ToDataURL (" image/jpeg ", 0.8); })}}Copy the code

3, some functions used above, get the ios version, compare the system version number, etc

/* * Get ios version */ const getIosVer = () => {let userAgent = navigator.userAgent; let reg = /CPU iPhone OS (.*?) like Mac OS/i; let verStr = userAgent.match(reg)[1]; return verStr.replace(/_/g, "."); }; /** * Check whether the software/system version is earlier than the set version value. Return 1 to indicate that the current version is greater than the set version value. Return 0 to indicate that the two versions are equal. -1 indicates that the current version is smaller than the specified version * @param {string} ver Software/system version * @param {string} compareVer Specified version */ const compareVersion = (ver, compareVer) => { ver = ver.split("."); compareVer = compareVer.split("."); const len = Math.max(ver.length, compareVer.length); while (ver.length < len) { ver.push("0"); } while (compareVer.length < len) { compareVer.push("0"); } for (let i = 0; i < len; i++) { const num1 = parseInt(ver[i]); const num2 = parseInt(compareVer[i]); if (num1 > num2) { return 1; } else if (num1 < num2) { return -1; } } return 0; };Copy the code