import EXIF from 'exif-js' // 旋转图片 const rotateImg = (img, direction, canvas) => { //最小与最大旋转方向,图片旋转4次后回到原方向 const min_step = 0; const max_step = 3; if (img == null) return; //img的高度和宽度不能在img元素隐藏后获取,否则会出错 let height = img.height; let width = img.width; let step = 2; if (step == null) { step = min_step; } if (direction == "right") { step++; //旋转到原位置,即超过最大值 step > max_step && (step = min_step); } else { step--; step < min_step && (step = max_step); } //旋转角度以弧度值为参数 let degree = (step * 90 * Math.PI) / 180; let ctx = canvas.getContext("2d"); switch (step) { case 0: canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0); break; case 1: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, 0, -height); break; case 2: canvas.width = width; canvas.height = height; ctx.rotate(degree); ctx.drawImage(img, -width, -height); break; case 3: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, -width, 0); break; } } export default { getOrientation: (file) => { return new Promise((resolve) => { EXIF.getData(file, function () { // console.log(EXIF.getAllTags(this)) const orient = EXIF.getTag(this, 'Orientation') // console.log(orient) resolve(orient) }) }) }, dataURLtoFile: (dataUrl, filename) => { const arr = dataUrl.split(',') const mime = arr[0].match(/:(.*?);/)[1] const bstr = atob(arr[1]) let n = bstr.length let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, { type: mime }); }, // rotateImage: (image, width, height) => { // let canvas = document.createElement('canvas') // let ctx = canvas.getContext('2d') // ctx.save() // canvas.width = height // canvas.height = width // ctx.rotate(90 * Math.PI / 180) // ctx.drawImage(image, 0, -height) // ctx.restore() // return canvas.toDataURL("image/jpeg") // }, rotateImage: (img, width, height, Orientation) => { let canvas = document.createElement('canvas') let ctx = canvas.getContext('2d') ctx.save() canvas.width = height canvas.height = width //修复ios上传图片的时候 被旋转的问题 if (Orientation != "" && Orientation != 1) { switch (Orientation) { case 6: //需要顺时针(向左)90度旋转 rotateImg(img, "left", canvas); break; case 8: //需要逆时针(向右)90度旋转 rotateImg(img, "right", canvas); break; case 3: //需要180度旋转 rotateImg(img, "right", canvas); //转两次 rotateImg(img, "right", canvas); break; } } // ctx.rotate(90 * Math.PI / 180) // ctx.drawImage(img, 0, -height) ctx.restore() return canvas.toDataURL("image/jpeg") } }