Da das Frontend lokale Dateien nicht direkt bedienen kann, Benutzer k?nnen Dateien entweder per Mausklick ausw?hlen oder per Drag & Drop verwenden oder Steuerelemente von Drittanbietern wie Flash verwenden. Allerdings nimmt die Verwendung von Flash von Tag zu Tag ab von Blitz wird immer noch nicht empfohlen. Gleichzeitig bietet der Aufstieg von HTML5 viel API-Kontrolle. Sie k?nnen die native API im Front-End verwenden, um Bilder zu verarbeiten, was den Druck auf den Back-End-Server verringern kann und auch benutzerfreundlich ist.

Der Endeffekt ist wie folgt:

Hier gibt es mehrere Funktionen, die erste dient der Unterstützung von Drag & Drop, die zweite dem Komprimieren und Die dritte ist das Zuschneiden und Bearbeiten, die vierte ist das Hochladen und Hochladen der Fortschrittsanzeige. Die Implementierung jeder Funktion wird nacheinander vorgestellt:

1. Ziehen und Ablegen, um Bilder anzuzeigen

Das Ziehen und Ablegen Die Lesefunktion dient haupts?chlich dem Abh?ren des Drag-Ereignisses von HTML5. Dazu gibt es nicht viel zu sagen. überprüfen Sie einfach die API und Sie werden wissen, wie das geht. Die Hauptsache ist, wie das vom Benutzer gezogene Bild gelesen wird Konvertieren Sie es zur lokalen Anzeige in Base64.

Drag-and-Drop-Ereignisse abh?ren

varhandler={
    init:function($container){
        //需要把dragover的默認(rèn)行為禁掉，不然會(huì)跳頁
        $container.on("dragover",function(event){
            event.preventDefault();
        });
        $container.on("drop",function(event){
            event.preventDefault();
            //這里獲取拖過來的圖片文件，為一個(gè)File對象
            varfile=event.originalEvent.dataTransfer.files[0];
            handler.handleDrop($(this),file);
        });
     }
}

Zeile 10 des Codes ruft die Bilddatei ab und übergibt sie dann zur Verarbeitung an Zeile 11.

Wenn die Eingabe verwendet wird, h?ren Sie auf das ?nderungsereignis der Eingabe:

        $container.on("change","input[type=file]",function(event){
            if(!this.value)return;
            varfile=this.files[0];
            handler.handleDrop($(this).closest(".container"),file);
            this.value="";
        });

Besorgen Sie sich in Zeile 3 des Codes das File-Objekt und übergeben Sie es zur Verarbeitung an handleDrop

Als n?chstes lesen Sie in der handleDrop-Funktion den Inhalt der Datei und konvertieren Sie ihn in das Base64-Format:

handleDrop:function($container,file){
    var$img=  $container.find("img");
    handler.readImgFile(file,$img,$container);
},

Mein Code hat auch eine readImgFile-Funktion angepasst, haupts?chlich für die Disassemblierung. Entwirren Sie gro?e Module und verwenden Sie kleine Module wieder.

Lesen Sie den Inhalt der Bilddatei in readImgFile:

Verwenden Sie FileReader, um die Datei zu lesen

readImgFile:function(file,$img,$container){
    varreader=newFileReader(file);
    //檢驗(yàn)用戶是否選則是圖片文件
    if(file.type.split("/")[0]!=="image"){
        util.toast("You should choose an image file");
        return;
    }  
    reader.onload=function(event){
        varbase64=event.target.result;
        handler.compressAndUpload($img,base64,file,  $container);
    }  
    reader.readAsDataURL(file);
}

Hier lesen Sie den Dateiinhalt über FileReader und rufen readAsDataURL auf. Die API kann den bin?ren Bildinhalt in das Base64-Format konvertieren. Nach dem Lesen wird das Onload-Ereignis ausgel?st und das Onload angezeigt und hochgeladen:

//獲取圖片base64內(nèi)容
varbase64=event.target.result;
//如果圖片大于1MB，將body置半透明
if(file.size>ONE_MB){
    $("body").css("opacity",0.5);
}
//因?yàn)檫@里圖片太大會(huì)被卡一下，整個(gè)頁面會(huì)不可操作
$img.attr("src",baseUrl);
//還原
if(file.size>ONE_MB){
    $("body").css("opacity",1);
}
//然后再調(diào)一個(gè)壓縮和上傳的函數(shù)
handler.compressAndUpload($img,file,$container);

Wenn das Bild mehrere MB gro? ist, fahren Sie mit Nr. 8 fort Die obige Zeile blieb bei der Anzeige h?ngen. Ich habe versucht, das Problem mit Web-Worker-Multithreading zu l?sen. Da Multithreading jedoch kein Fensterobjekt hat und DOM nicht bedienen kann, kann es dieses Problem nicht gut l?sen. Es wurde eine Ausgleichsma?nahme ergriffen: Indem die Seite leer gemacht wird, wird dem Benutzer mitgeteilt, dass sie gerade verarbeitet wird und die Seite nicht funktionsf?hig ist.

Hier liegt ein weiteres Problem vor, n?mlich wenn Die vom iOS-System aufgenommenen Fotos sind nicht horizontal. Es wird Probleme mit dem Drehwinkel der aufgenommenen und angezeigten Fotos geben. Das folgende vertikal aufgenommene Foto liest sich wie folgt:

Das hei?t, egal wie Sie es aufnehmen, ios Die tats?chlich gespeicherten Bilder werden alle horizontal platziert, sodass der Benutzer sie manuell drehen muss. Der Drehwinkel wird in die Exif-Datenstruktur eingefügt. Sie k?nnen den Drehwinkel ermitteln, indem Sie Folgendes auslesen:

Exif-Informationen lesen

readImgFile:function(file,$img,$container){
    EXIF.getData(file,function(){
        varorientation=this.exifdata.Orientation,
            rotateDeg=0;
        //如果不是ios拍的照片或者是橫拍的，則不用處理，直接讀取
        if(typeoforientation==="undefined"||orientation===1){
            //原本的readImgFile，添加一個(gè)rotateDeg的參數(shù)
            handler.doReadImgFile(file,$img,$container,rotateDeg);
        }  
        //否則用canvas旋轉(zhuǎn)一下
        else{
            rotateDeg=orientation===6?90*Math.PI/180:
                            orientation===8?-90*Math.PI/180:
                            orientation===3?180*Math.PI/180:0;
            handler.doReadImgFile(file,$img,$container,rotateDeg);
        }  
    });
}

Nachdem Sie den Winkel kennen, k?nnen Sie das komprimierte Bild unten erkl?ren, da Canvas auch zur Komprimierung verwendet wird

2. Bilder komprimieren

Sie k?nnen Canvas zum Komprimieren verwenden Bilder k?nnen problemlos komprimiert werden. Das Prinzip besteht darin, ein Bild auf eine kleine Leinwand zu zeichnen und dann den Inhalt der Leinwand nach base64 zu exportieren. Anschlie?end erhalten Sie ein komprimiertes Bild:

//設(shè)定圖片最大壓縮寬度為1500px
varmaxWidth=1500;
varresultImg=handler.compress($img[0],maxWidth,file.type);

Das Die Komprimierungsfunktion führt eine Komprimierung durch. Erstellen Sie in dieser Funktion zun?chst ein Leinwandobjekt und berechnen Sie dann die Gr??e der Leinwand:

compress:function(img,maxWidth,mimeType){
    //創(chuàng)建一個(gè)canvas對象
    varcvs=document.createElement('canvas');
    varwidth=img.naturalWidth,
        height=img.naturalHeight,
        imgRatio=width/height;
    //如果圖片維度超過了給定的maxWidth 1500，
    //為了保持圖片寬高比，計(jì)算畫布的大小
    if(width>maxWidth){
        width=maxWidth;
        height=width/imgRatio;
    }  
    cvs.width=width;
    cvs.height=height;
}

Zeichnen Sie als N?chstes das gro?e Bild auf eine kleine Leinwand und exportieren Sie es dann:

Komprimierungsverarbeitung

    //把大圖片畫到一個(gè)小畫布
    varctx=cvs.getContext("2d").drawImage(img,0,0,img.naturalWidth,img.naturalHeight,0,0,width,height);
    //圖片質(zhì)量進(jìn)行適當(dāng)壓縮
    varquality=width>=1500?0.5:
                    width>600?0.6:1;
    //導(dǎo)出圖片為base64
    varnewImageData=cvs.toDataURL(mimeType,quality);
 
    varresultImg=newImage();
    resultImg.src=newImageData;
    returnresultImg;

Die letzte Zeile gibt ein komprimiertes kleines Bild zurück, das zugeschnitten werden kann.

Bevor wir das Zuschneiden erkl?ren, da im zweiten Punkt erw?hnt wurde, dass mit iOS aufgenommene Fotos gedreht werden müssen, k?nnen sie w?hrend der Komprimierung zusammen verarbeitet werden. Mit anderen Worten, wenn Sie drehen müssen, zeichnen Sie es auf die Leinwand und drehen Sie es:

Leinwand drehen

varctx=cvs.getContext("2d");
vardestX=0,
    destY=0;
if(rotateDeg){
    ctx.translate(cvs.width/2,cvs.height/2);
    ctx.rotate(rotateDeg);
    destX=-width/2,
    destY=-height/2;
}
ctx.drawImage(img,0,0,img.naturalWidth,img.naturalHeight,destX,destY,width,height);

Dies l?st das Problem der iOS-Bilddrehung und erh?lt eine Nachdrehung und das angepasste Bild komprimieren, es zum Zuschneiden und Bearbeiten verwenden

3. Bild zuschneiden

Um das Bild zuzuschneiden, habe ich online ein Plug-in zum Zuschneiden gefunden. Dieses Plug-in ist ziemlich leistungsf?hig und unterstützt Zuschneiden, Drehen und Spiegeln, verarbeitet das Bild jedoch nicht. Es zeichnet lediglich die vom Benutzer vorgenommenen Transformationen auf und verarbeitet es dann selbst. Die transformierten Daten k?nnen zur Verarbeitung an das Backend übergeben werden. Hier kümmern wir uns um das Frontend, da wir nicht mit IE8 kompatibel sein müssen.

如下，我把一張圖片，旋轉(zhuǎn)了一下，同時(shí)翻轉(zhuǎn)了一下：

它的輸出是：

{
    height:319.2000000000001,
    rotate:45,
    scaleX:-1,
    scaleY:1,
    width:319.2000000000001
    x:193.2462838120872
    y:193.2462838120872
}

通過這些信息就知道了：圖片被左右翻轉(zhuǎn)了一下，同時(shí)順時(shí)針轉(zhuǎn)了45度，還知道裁剪選框的位置和大小。通過這些完整的信息就可以做一對一的處理。

在展示的時(shí)候，插件使用的是img標(biāo)簽，設(shè)置它的css的transform屬性進(jìn)行變換。真正的處理還是要借助canvas，這里分三步說明：

1. 假設(shè)用戶沒有進(jìn)行旋轉(zhuǎn)和翻轉(zhuǎn)，只是選了簡單地選了下區(qū)域裁剪了一下，那就簡單很多。最簡單的辦法就是創(chuàng)建一個(gè)canvas，它的大小就是選框的大小，然后根據(jù)起點(diǎn)x、y和寬高把圖片相應(yīng)的位置畫到這個(gè)畫布，再導(dǎo)出圖片就可以了。由于考慮到需要翻轉(zhuǎn)，所以用第二種方法，創(chuàng)建一個(gè)和圖片一樣大小的canvas，把圖片原封不動(dòng)地畫上去，然后把選中區(qū)域的數(shù)據(jù)imageData存起來，重新設(shè)置畫布的大小為選中框的大小，再把imageData畫上去，最后再導(dǎo)出就可以了：

簡單裁剪實(shí)現(xiàn)

varcvs=document.createElement('canvas');
varimg=$img[0];
varwidth=img.naturalWidth,
    height=img.naturalHeight;
cvs.width=width;
cvs.height=height;
 
varctx=cvs.getContext("2d");
vardestX=0,
    destY=0;
ctx.drawImage(img,destX,destY);
 
//把選中框里的圖片內(nèi)容存起來
varimageData=ctx.getImageData(cropOptions.x,cropOptions.y,cropOptions.width,cropOptions.height);
cvs.width=cropOptions.width;
cvs.height=cropOptions.height;
//然后再畫上去
ctx.putImageData(imageData,0,0);

代碼14行，通過插件給的數(shù)據(jù)，保存選中區(qū)域的圖片數(shù)據(jù)，18行再把它畫上去

2. 如果用戶做了翻轉(zhuǎn)，用上面的結(jié)構(gòu)很容易可以實(shí)現(xiàn)，只需要在第11行drawImage之前對畫布做一下翻轉(zhuǎn)變化：

canvas flip實(shí)現(xiàn)

//fip
if(cropOptions.scaleX===-1||cropOptions.scaleY===-1){
    destX=cropOptions.scaleX===-1?width*-1:0;      // Set x position to -100% if flip horizontal
    destY=cropOptions.scaleY===-1?height*-1:0;     // Set y position to -100% if flip vertical
    ctx.scale(cropOptions.scaleX,cropOptions.scaleY);
}
ctx.drawImage(img,destX,destY);

其它的都不用變，就可以實(shí)現(xiàn)上下左右翻轉(zhuǎn)了，難點(diǎn)在于既要翻轉(zhuǎn)又要旋轉(zhuǎn)

3. 兩種變換疊加沒辦法直接通過變化canvas的坐標(biāo)，一次性drawImage上去。還是有兩種辦法，第一種是用imageData進(jìn)行數(shù)學(xué)變換，計(jì)算一遍得到imageData里面，從第一行到最后一行每個(gè)像素新的rgba值是多少，然后再畫上去；第二種辦法，就是創(chuàng)建第二個(gè)canvas，第一個(gè)canvas作翻轉(zhuǎn)，把它的結(jié)果畫到第二個(gè)canvas，然后再旋轉(zhuǎn)，最后導(dǎo)到。由于第二種辦法相對比較簡單，我們采取第二種辦法：

同上，在第一個(gè)canvas畫完之后：

實(shí)現(xiàn)旋轉(zhuǎn)、翻轉(zhuǎn)結(jié)合

ctx.drawImage(img,destX,destY);
//rotate
if(cropOptions.rotate!==0){
    varnewCanvas=document.createElement("canvas"),
        deg=cropOptions.rotate/180*Math.PI;
    //旋轉(zhuǎn)之后，導(dǎo)致畫布變大，需要計(jì)算一下
    newCanvas.width=Math.abs(width*Math.cos(deg))+Math.abs(height*Math.sin(deg));
    newCanvas.height=Math.abs(width*Math.sin(deg))+Math.abs(height*Math.cos(deg));
    varnewContext=newCanvas.getContext("2d");
    newContext.save();
    newContext.translate(newCanvas.width/2,newCanvas.height/2);
    newContext.rotate(deg);
    destX=-width/2,
    destY=-height/2;
    //將第一個(gè)canvas的內(nèi)容在經(jīng)旋轉(zhuǎn)后的坐標(biāo)系畫上來
    newContext.drawImage(cvs,destX,destY);
    newContext.restore();
    ctx=newContext;
    cvs=newCanvas;
}

將第二步的代碼插入第一步，再將第三步的代碼插入第二步，就是一個(gè)完整的處理過程了。

最后再介紹下上傳

4. 文件上傳和上傳進(jìn)度

文件上傳只能通過表單提交的形式，編碼方式為multipart/form-data，這個(gè)我在《三種上傳文件不刷新頁面的方法討論：iframe/FormData/FileReader》已做詳細(xì)討論，可以通過寫一個(gè)form標(biāo)簽進(jìn)行提交，但也可以模擬表單提交的格式，表單提交的格式在那篇文章已提及。

首先創(chuàng)建一個(gè)ajax請求：

varxhr=newXMLHttpRequest();
xhr.open('POST',upload_url,true);
varboundary='someboundary';
xhr.setRequestHeader('Content-Type','multipart/form-data; boundary='+boundary);

并設(shè)置編碼方式，然后拼表單格式的數(shù)據(jù)進(jìn)行上傳：

ajax上傳

vardata=img.src;
data=data.replace('data:'+file.type+';base64,','');
xhr.sendAsBinary([
    //name=data
    '--'+boundary,
        'Content-Disposition: form-data; name="data"; filename="'+file.name+'"',
        'Content-Type: '+file.type,'',
        atob(data),'--'+boundary,
    //name=docName
    '--'+boundary,
        'Content-Disposition: form-data; name="docName"','',
        file.name,
    '--'+boundary+'--'
].join('\r\n'));

表單數(shù)據(jù)不同的字段是用boundary的隨機(jī)字符串分隔的。拼好之后用sendAsBinary發(fā)出去，在調(diào)這個(gè)函數(shù)之前先監(jiān)聽下它的事件，包括
1) 上傳的進(jìn)度：

xhr.upload.onprogress=function(event){
    if(event.lengthComputable){
        duringCallback((event.loaded/event.total)*100);
    }
};

這里凋duringCallback的回調(diào)函數(shù)，給這個(gè)回調(diào)函數(shù)傳了當(dāng)前進(jìn)度的參數(shù)，用這個(gè)參數(shù)就可以設(shè)置進(jìn)度條的過程了。進(jìn)度條可以自己實(shí)現(xiàn)，或者直接上網(wǎng)找一個(gè)，隨便一搜就有了。
2) 成功和失?。?/p>

xhr.onreadystatechange=function(){
    if(this.readyState==4){
        if(this.status==200){
            successCallback(this.responseText);
        }elseif(this.status>=400){
            if(errorCallback&&  errorCallback instanceofFunction){
                errorCallback(this.responseText);
            }      
        }      
    }
};

這個(gè)上傳功能參考了一個(gè)JIC插件

至此整個(gè)功能就拆解說明完了，上面的代碼可以兼容到IE10，F(xiàn)ileReader的api到IE10才兼容，問題應(yīng)該不大，因?yàn)槲④浂家呀?jīng)放棄了IE11以下的瀏覽器，為啥我們還要去兼容呢。

這個(gè)東西一來減少了后端的壓力，二來不用和后端來回交互，對用戶來說還是比較好的，除了上面說的一個(gè)地方會(huì)被卡一下之外。核心代碼已在上面說明，完整代碼和demo就不再放出來了。