JavaScript处理移动端拍摄图片旋转问题的方法
这篇文章主要介绍JavaScript处理移动端拍摄图片旋转问题的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
我们提供的服务有：做网站、成都网站建设、微信公众号开发、网站优化、网站认证、洛扎ssl等。为上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的洛扎网站制作公司
第一步：引入exif-js
第二步：
/**
* 处理图片文件（处理移动端拍摄图片旋转问题）
* fileObj.file 图片文件独享
* fileObj.resolution 在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。
* fileObj.fileType 输入的文件类型，1 file对象，2 blob对象，3 base64字符串
* fileObj.fileName 输出的文件名称，默认为picture.jpeg
* fileObj.callback 回调函数
*/
function handleImageFile(fileObj) {
// 给参数附初始值
fileObj.fileName = fileObj.hasOwnProperty("fileName") ? "images/" + fileObj.fileName : "images/picture.jpeg";
// 获取文件类型
var fType = fileObj.file.type;
if (fType.indexOf("image") === -1) return fileObj.callback({
status: 500,
message: "文件类型不正确",
data: null
});
if (!EXIF) return fileObj.callback({
status: 500,
message: "EXIF 不存在",
data: null
});
if (fileObj.file) {
// 获取照片方向角属性，用户旋转控制
EXIF.getData(fileObj.file, function () {
var 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 canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var resultFile = null;
var ua = navigator.userAgent;
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
ctx.drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight);
// android终端
var isAdr = ua.indexOf("Android") > -1 || ua.indexOf("Adr") > -1;
// ios终端
var isIOS = ua.indexOf("iPhone") > -1 || ua.indexOf("iOS") > -1;
// 修复ios 或 Android
if (isIOS || isAdr) {
// 如果方向角不为1，都需要进行旋转
if (orientation && orientation !== "" && orientation !== 1) {
switch (orientation) {
case 6: // 需要顺时针（向左）90度旋转
rotateImg(this, "left", canvas);
break;
case 8: // 需要逆时针（向右）90度旋转
rotateImg(this, "right90", canvas);
break;
case 3: // 需要180度旋转，转两次
rotateImg(this, "right180", canvas);
break;
}
}
resultFile = canvas.toDataURL("image/jpeg", fileObj.resolution);
} else {
resultFile = canvas.toDataURL("image/jpeg", fileObj.resolution);
}
switch (fileObj.fileType) {
case 1:
case 2:
fileObj.callback({
status: 200,
message: "success",
data: dataURLtoFile(resultFile, fileObj.fileType, fileObj.fileName)
});
break;
case 3:
fileObj.callback({
status: 200,
message: "success",
data: resultFile
});
break;
default:
break;
}
};
};
oReader.readAsDataURL(fileObj.file);
});
} else {
return fileObj.callback({
status: 500,
message: "文件不存在",
data: null
});
}
/**
* 旋转图片
*/
function rotateImg(img, direction, canvas) {
if (img === null) return;
// 最小与最大旋转方向，图片旋转4次后回到原方向
var minStep = 0;
var maxStep = 3;
// img的高度和宽度不能在img元素隐藏后获取，否则会出错
var width = img.width;
var height = img.height;
var step = 2;
if (step === null) step = minStep;
if (direction === "right90") {
step++;
step > maxStep && (step = minStep);
} else if(direction === "right180") {
step = 2;
} else {
step--;
step < minStep && (step = maxStep);
}
// 旋转角度以弧度值为参数
var degree = step * 90 * Math.PI / 180;
var ctx = canvas.getContext("2d");
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height, width, height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height, width, height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0, width, height);
break;
}
}
/**
* type：1 file对象，2 blob对象
*/
function dataURLtoFile(dataurl, type, filename) {
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
if (type === 1) { // 转换成file对象
return new File([u8arr], filename, {
type: mime
});
} else { // 转换成成blob对象
return new Blob([u8arr], {
type: mime
});
}
}
}以上是“JavaScript处理移动端拍摄图片旋转问题的方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
当前题目：JavaScript处理移动端拍摄图片旋转问题的方法
网站路径：http://ybzwz.com/article/ipieid.html
