Readfile.js Image compression, image rotation adjustment (base64)

NPM install exif-js --save let imgPreview = function(file,callback){let Orientation This.exif. getData(file, function () {Orientation = this.exif. getTag(file, 'Orientation'); }); if (! file || ! window.FileReader) return; if (/^image/.test(file.type)) { let reader = new FileReader(); reader.readAsDataURL(file) reader.onloadend = function() { let result = this.result; let img = new Image(); img.src = result; img.onload = () => { let data = that.compress(img, Orientation); callback(data); }; }; } } let compress = function(img,Orientation){ let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); Let the width = img. Width / 3.5; Let height = img. Height / 3.5; canvas.width = width; canvas.height = height; ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, width, height); The console. The log (Orientation) / / dealing with ios mobile rotation Angle if (the navigator. UserAgent. Match (/ iphone/I)) {if (Orientation! = "" && Orientation ! = 1){ switch(Orientation){ case 6: this.rotateImg(img,'left',canvas); break; case 8: this.rotateImg(img,'right',canvas); break; case 3: this.rotateImg(img,'right',canvas); // Rotate this.rotateImg(img,'right',canvas) twice; break; }}}else{// If (Orientation! = "" && Orientation ! = 1){ switch(Orientation){ case 6: this.rotateImg(img,'left',canvas); break; case 8: this.rotateImg(img,'right',canvas); break; case 3: this.rotateImg(img,'right',canvas); this.rotateImg(img,'right',canvas); break; Var ndata = canvas. ToDataURL ("image/jpeg", 0.4); return ndata; } let rotateImg = function(img, direction,canvas) {const min_step = 0; const max_step = 3; if (img == null)return; // Let height = img.height/3.5; Let the width = img. Width / 3.5; let step = 2; if (step == null) { step = min_step; } if (direction == 'right') { step++; // Rotate to original position, i.e. 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'); console.log(step) 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; } } export {imgPreview};Copy the code

Method of use

<template> <input type="file" id="uploadImgInput" accept="image/*" style="display:none" capture="camera"> <button </button> </template>Copy the code
<script> import {imgPreview} from "@/plugins/fliter/readFile" export default{ data(){ return:{ } }, methods:{ photoClick(){ const uploadImgInput = document.elementById("uploadImgInput"); uploadImgInput.click(); uploadImgInput.addEventListener("change", this.readFile); }; readFile(e){ let _this = this; let files = e.target.files || e.dataTransfer.files; if(! files.length) return; this.picavalue = files[0]; var reader = new FileReader(); reader.readAsDataURL(this.picavalue); reader.onload = function(e){ var imgTemp = new Image(); imgTemp.src = e.target.result; }; ImgPreview (this.picavalue, function(data){// Data is base64; } } } } </script>Copy the code