Vue image upload to solve the problem of image compression and iOS shooting angle rotation

vue image upload to solve the problem of image compression and shooting angle rotation

The reference Exif.js provides a functional extension of the raw data for JavaScript to read images, such as camera direction, device model, time taken, ISO sensitivity, GPS location, and so on. (Address: http://code.ciaoca.com/javascript/exif-js/), combined with the use of Vue, compatible PC-side and mobile end, to achieve a single or multiple pictures upload, image compression, to solve the problem of rotation angle shooting.

Effect Chart:

Vue file:

<template> <div class= "Add_tuzhi add_tuzhi_textarea" > <div class= "add_tuzhi_com mb bg-fff" > <input id= "plus_sent_pic" type= "file" @change = "Handlefilechange" ref= "Inputer" class= "Trans_file" accept=
                "Image/png, Image/jpeg, Image/gif, image/jpg" multiple> <div class= "Add_img clearfix" > <div class= "Add_img_list" v-for= "(Data,index) in imgdata" @click = "delimg (index)" > &LT;IMG:SRC
                = "Data" > <span class= "Tuzhi_sel" ></span> </div> <template v-if= "img_loading" > <div class= "add_img_list" > <p CLA ss= "map_loading" > Photo upload </p> </div> </template>
                        ; template v-else> <label for= "Plus_sent_pic" class= "add_img_list" v-if= "num<9" > <div Class= "Tuzhi_add" > <p><span>{{num}}</span>/9</p>   
                    
            </div> </label> </template> </div> </div> </div> </template> <script> import EXIF from '. /..
/common/js/small-exif.js ';       
            Export default {data () {return {num:0,//Upload picture number base64: ',//Compressed picture  Imgdata:[],//Picture data:{base64: '}, Imgtype:2,//Picture upload status 0: The picture has been successfully uploaded 1 indicates that the image was uploaded 2 indicates that the picture has not been uploaded, Img_loading:false, orientation: ',//Picture's Shooting Angle}}, Mounted:functio
            N () {}, methods:{delimg (id,index) {//delete picture This.imgData.splice (index, 1);
            if (this.num>=1) {this.num-=1; }, Handlefilechange () {//Get image let That=this;
            Let Inputdom = this. $refs. Inputer;
                Fetching file data through DOM for (let I in Inputdom.files) {this.file= inputdom.files[i];
                This.imgpreview (This.file); Exif.getdata (This.file, function () {that.
                Orientation = Exif.gettag (this, ' orientation ');
            });
            }, Imgpreview (file) {//base64 format this.imgtype=1;
            This.img_loading=true;
            let self = this;
            Let imgcontent={};
            Imgcontent.name=file.name; See support does not support FileReader if (!file | | |!window).

            FileReader) return;
                if (/^image/.test (File.type)) {//Create a reader var reader = new FileReader ();
                The picture will be converted to Base64 format reader.readasdataurl (file);
         Read-Successful callback reader.onloadend = function () {Let IMG = new Image ();           IMG.SRC = This.result; Img.onload = function () {Let w = this.naturalwidth, h = this.naturalhe
                        ight, Resizew = 0, Resizeh = 0;
                            Compression set Let MaxSize = {width:1280,//Picture maximum width
                        height:1280,//Picture max height level:0.6//Picture Save quality};
                            Calculate scaling if (W > maxsize.width | | | h > Maxsize.height) {
                            Let multiple = Math.max (W/maxsize.width, h/maxsize.height);
                            Resizew = W/multiple;
                        Resizeh = H/multiple;
                            }else{Resizew = w;
                        Resizeh = h; Let Canvas = document.createelement ("Canvas"), CXT = Canvas.getcontext (' 2d '); Rotate the image to adjust if (self) according to the angle of the shot.
                            Orientation = = 3) {canvas.width = Resizew;
                            Canvas.height = Resizeh;
                            Cxt.rotate (Math.PI); Cxt.drawimage (IMG, 0, 0,-resizew,-resizeh)} else if (self.
                            Orientation = = 8) {canvas.width = Resizeh;
                            Canvas.height = Resizew;
                            Cxt.rotate (Math.PI * 3/2); Cxt.drawimage (IMG, 0, 0,-resizew, Resizeh)} else if (self.
                            Orientation = = 6) {canvas.width = Resizeh;
                            Canvas.height = Resizew;
                            Cxt.rotate (MATH.PI/2); Cxt.drawimage (IMG, 0, 0, Resizew,-resizeH)} else {canvas.width = Resizew;
                            Canvas.height = Resizeh;
                        Cxt.drawimage (IMG, 0, 0, Resizew, Resizeh)}//base64, final output of compressed files
                        Self.base64 = Canvas.todataurl (' image/jpeg ', maxsize.level);
                        Self.num+=1;
                        self.imgtype=0;
                        Self.img_loading=false;
            Self.imgData.push (SELF.BASE64)}}; }}} </script> <style scoped src= "./approach_add.css" > </style>

CSS file:

@charset "Utf-8"; add_tuzhi{height:100%;
    OVERFLOW-Y: scroll;
Padding-bottom:2rem;
    }. trans_file{display:none; add_img{padding:0.213333rem; add_img_list{float:left;
    Width:3.893333333333333rem;
    Height:3.893333333333333rem;
    position:relative;
    Padding:0.213333rem;
Box-sizing:border-box;
    }. add_img_list img{width:100%;
height:100%;
    }. add_img_list. tuzhi_sel{Position:absolute;
    Width:0.64rem;
    Height:0.64rem;
    right:0;
    top:0;
    Background:url (./colse.png);
background-size:100% 100%;
    }. add_img_list. tuzhi_add{Display:block;
    width:100%;
    height:100%;
    position:relative;
    Background:url (./add.png);
background-size:100% 100%;
    Add_img_list. Tuzhi_add p{color: #ccc;
    Font-size:0.554667rem;
    Position:absolute;
    Left:1.28rem;
Bottom:0.32rem;
    }. add_img_list. map_loading{width:100%;
    Text-align:center;
  Height:3.466666666666333rem;  Line-height:3.466666666666333rem;
    Color: #333;
    Font-size:0.554667rem;
border:1px #dedede dashed; }

Encapsulated Exif-js File:

var EXIF = {}; var tifftags = EXIF.

Tifftags = {0x0112: "orientation"}; function Imagehasdata (IMG) {return!!
(Img.exifdata); function Getimagedata (IMG, callback) {function Handlebinaryfile (binfile) {var data = Findexifinjpeg (binfi
        Le); Img.exifdata = Data | |
        {};
        if (callback) {Callback.call (IMG); } if (window. FileReader && (img instanceof window.) Blob | | IMG instanceof window.
        File) {var filereader = new FileReader ();
        Filereader.onload = function (e) {handlebinaryfile (E.target.result);
        };
    Filereader.readasarraybuffer (IMG);

    } function Findexifinjpeg (file) {var dataView = new DataView (file); if ((dataview.getuint8 (0)!= 0xFF) | | (Dataview.getuint8 (1)!= 0xd8))

    {return false;//not a valid JPEG} var offset = 2, length = file.bytelength, marker; while (offset < length) {if dataview.getuint8Set)!= 0xFF) {return false;//not a valid marker, something is wrong} marker = DATAVIEW.G

        EtUint8 (offset + 1);
        if (marker = =) {return Readexifdata (DataView, offset + 4, dataview.getuint16 (offset + 2)-2);
        else {offset = 2 + dataview.getuint16 (offset + 2); }} function Readtags (file, Tiffstart, Dirstart, strings, bigend) {var entries = file.getuint16 (Dirstart,!big

    End), tags = {}, Entryoffset, tag, I;
        for (i = 0; i < entries i++) {entryoffset = Dirstart + i * 12 + 2;
        Tag = strings[file.getuint16 (Entryoffset,!bigend)];
    Tags[tag] = readtagvalue (file, Entryoffset, Tiffstart, Dirstart, bigend);
} return tags; function Readtagvalue (file, Entryoffset, Tiffstart, Dirstart, bigend) {var type = file.getuint16 (Entryoffset + 2, !bigend), numvalues = File.getuint32 (Entryoffset + 4,!bigend), Valueoffset = fiLe.getuint32 (Entryoffset + 8,!bigend) + Tiffstart, offset, Vals, Val, N, numerator, denominator; Switch (type) {Case 1://Byte, 8-bit unsigned int case 7://Undefined, 8-bit byte, value depending
            On field if (numvalues = = 1) {return file.getuint8 (Entryoffset + 8,!bigend);
                else {offset = numvalues > 4 valueoffset: (Entryoffset + 8);
                Vals = [];
                for (n = 0; n < numvalues; n++) {Vals[n] = file.getuint8 (offset + N);
            return vals; Case 2://ASCII, 8-bit byte offset = numvalues > 4?
            Valueoffset: (Entryoffset + 8);

        return Getstringfromdb (file, offset, numValues-1); Case 3://short, bit int if (numvalues = 1) {return file.getuint16 (Entryoffset + 8,!big
            End); else {offset = numvalues > 2?
                Valueoffset: (Entryoffset + 8);
                Vals = [];
                for (n = 0; n < numvalues; n++) {Vals[n] = file.getuint16 (offset + 2 * n,!bigend);
            return vals;  Case 4://long, bit int if (numvalues = 1) {return file.getuint32 Entryoffset
            + 8,!bigend);
                else {vals = [];
                for (n = 0; n < numvalues; n++) {Vals[n] = File.getuint32 (valueoffset + 4 * n,!bigend);
            return vals; Case 5://rational = Two long values, the numerator, second is denominator if (numvalues = 1
                ) {numerator = File.getuint32 (Valueoffset,!bigend);
                Denominator = File.getuint32 (Valueoffset + 4,!bigend);
                val = new number (numerator/denominator); Val.numerator = numErator;
                Val.denominator = denominator;
            return Val;
                else {vals = [];
                    for (n = 0; n < numvalues n++) {numerator = File.getuint32 (Valueoffset + 8 * n,!bigend);
                    Denominator = File.getuint32 (Valueoffset + 4 + 8 * n,!bigend);
                    Vals[n] = new number (numerator/denominator);
                    Vals[n].numerator = numerator;
                Vals[n].denominator = denominator;
            return vals; Case 9://Slong, bit signed int if (numvalues = = 1) {return File.getint32 (entr
            Yoffset + 8,!bigend);
                else {vals = [];
                for (n = 0; n < numvalues; n++) {Vals[n] = File.getint32 (valueoffset + 4 * n,!bigend);
            return vals; Case://signed rational, TWo slongs, numerator, second is denominator if (numvalues = 1) {return file.getint32
            (Valueoffset,!bigend)/File.getint32 (Valueoffset + 4,!bigend);
                else {vals = []; for (n = 0; n < numvalues n++) {Vals[n] = File.getint32 (valueoffset + 8 * N,!bigend)/File.geti
                Nt32 (Valueoffset + 4 + 8 * n,!bigend);
            return vals;
    }} function Getstringfromdb (buffer, start, length) {var outstr = "";
    for (var n = start; n < start + length; n++) {outstr + = String.fromCharCode (Buffer.getuint8 (n));
return outstr;
    The function readexifdata (file, start) {if (Getstringfromdb (file, start, 4)!= "Exif") {return false;

    } var bigend, tags, tag, exifdata, gpsdata, Tiffoffset = start + 6; Test for TIFF validity and endianness if (file.getuint16 (tiffoffset) = = 0x4949) {bigend = false;
    else if (file.getuint16 (tiffoffset) = = 0x4d4d) {Bigend = true;
    else {return false;
    } if (File.getuint16 (Tiffoffset + 2,!bigend)!= 0x002a) {return false;
    var firstifdoffset = File.getuint32 (Tiffoffset + 4,!bigend);
    if (Firstifdoffset < 0x00000008) {return false;

    tags = readtags (file, Tiffoffset, Tiffoffset + Firstifdoffset, tifftags, bigend);
return tags; } exif.getdata = function (IMG, callback) {if (img instanceof Image | | img instanceof htmlimageelement) &&

    !img.complete) return false;
    if (!imagehasdata (img)) {getimagedata (IMG, callback);
        else {if (callback) {Callback.call (IMG);
} return true;
    } Exif.gettag = function (IMG, tag) {if (!imagehasdata (IMG)) return;
return Img.exifdata[tag]; Export Default EXIF