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://myzitong.com/article/ipieid.html