The front-end uploading pictures is very simple on Android, just draw it directly with canvas, mainly because the Apple mobile phone is very troublesome, because the Apple mobile phone will rotate the picture. Therefore, the picture drawn by the canvas may be rotated at a certain angle.
Without further ado, the code to solve this problem is as follows:
html code:
<img src="img/fanpai-font.png" id="stage" />
<input type="file" class="file" onchange="selectFileImage(this)" />
js code:
This needs to be imported into exif.js. This is used to get the orientation angle attribute of the iPhone photo, which is controlled by the user's rotation.
<script src="js/exif.js"></script>
function selectFileImage(fileObj) {
var file = fileObj.files['0'];
var Orientation = null;
if (file) {
console.log("Uploading, please wait...");
var rFilter = /^ (image\/jpeg|image\/png)$/i; // Check the image format
if (!rFilter.test(file.type)) {
alert("Please select the image in jpeg, png format");
return;
}
//Get the photo orientation angle attribute, user rotation control
EXIF.getData(file, function() {
EXIF.getAllTags(this);
Orientation = EXIF.getTag(this, 'Orientation');
});
var oReader = new FileReader( );
oReader.onload = function(e) {
var image = new Image();
image.src = e.target.result;
image.onload = function() {
var expectWidth = this.naturalWidth;
var expectHeight = this.naturalHeight;
var scale=expectWidth/expectHeight；
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = expectWidth;
canvas.height = expectHeight;
//If the orientation angle is not 1, it needs to be rotated
if(Orientation && Orientation != "" && Orientation != 1){
var degree=0;
switch(Orientation){
case 6://It needs to be clockwise (to the left ) 90 degree rotation
degree=90;
canvas.width = expectHeight;
canvas.height = expectWidth;
ctx.translate(expectHeight/2,expectWidth/2);
ctx.rotate(degree * Math.PI / 180);
ctx.translate( -expectWidth/2,-expectHeight/2);
ctx.drawImage(image,0,0,expectWidth,expectHeight);
break;
case 8://Need to rotate 90 degrees counterclockwise (right) ;
degree=-90;
canvas.width = expectHeight;
canvas.height = expectWidth;
ctx.translate(expectHeight/2,expectWidth/2);
ctx. rotate(degree * Math.PI / 180);
ctx.translate(-expectWidth/2,-expectHeight/2);
ctx.drawImage(image,0,0,expectWidth,expectHeight);
break;
case 3://needs 180 Degree rotation
degree=-180;
ctx.rotate(degree * Math.PI / 180);
ctx.drawImage(image,-expectWidth,-expectHeight,expectWidth,expectHeight);
break;
}
}else{
ctx.drawImage(image,0,0,expectWidth,expectHeight);
}
var datu = canvas.toDataURL("image/png");
$("#stage").attr("src", datu)；
};
};
oReader.readAsDataURL(file);
}
}