幽灵资源网 Design By www.bzswh.com
本文实例为大家分享了js移动端拍摄图片旋转的具体代码,供大家参考,具体内容如下
第一步:引入exif-js
<script src="/UploadFiles/2021-04-02/exif.min.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 }); } } }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...