圖片上傳及圖片處理

一.input type=file與文件上傳

<input type="file">
複製代碼

若是想使用瀏覽器原生特性實現文件上傳(如圖片)效果，父級的form元素有個東西不能丟

enctype="multipart/form-data"
複製代碼

enctype屬性規定在發送到服務器以前應該如何對錶單數據進行編碼，默認的編碼是：」application/x-www-form-urlencoded「。對於普通數據是挺適用的，可是，對於文件，科科，就不能亂編碼了，該什麼就是什麼，只能使用multipart/form-data做爲enctype屬性值。

只上傳文件夾而不是文件

<input type="file" webkitdirectory directory multiple/> 
複製代碼

UI自定義

<label class="ui_button ui_button_primary" for="xFile">上傳文件</label> <form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"></form> 
複製代碼

accept屬性(用來指定瀏覽器接受的文件類型)

<input type="file" accept="image/*" > //只容許傳圖片 <input type="file" accept="image/png,image/jpeg,image/gif,image/jpg"> //只容許傳圖片
``` accept屬性是MIME類型： 
複製代碼

accept="application/pdf" accept="audio/x-mpeg" accept="text/html" .accept="video/x-mpeg2" ``` 多個屬性值使用逗號分隔：

<input accept="audio/*,video/*,image/*"> 
複製代碼

二.圖片上傳/壓縮/水印/方向問題

1.FileReader.readAsDataURL()：該方法會讀取指定的 Blob 或 File 對象。讀取操做完成的時候，readyState 會變成已完成（DONE），並觸發 loadend 事件，同時 result 屬性將包含一個data:URL格式的字符串（base64編碼）以表示所讀取文件的內容。

2.HTMLCanvasElement.toDataURL()返回一個包含圖片展現的 data URI 。能夠使用 type 參數其類型，默認爲 PNG 格式。圖片的分辨率爲96dpi

//語法：
canvas.toDataURL(type, encoderOptions); 
//type(可選):圖片格式，默認爲 image/png; 
//encoderOptions(可選) :在指定圖片格式爲 image/jpeg 或 image/webp的狀況下，能夠從 0 到 1 的區間內選擇圖片的質量。若是超出取值範圍，將會使用默認值 0.92。
//返回值：包含 data URI 的DOMString。 
複製代碼

2.1圖片上傳

//html 
<label class="ui_button ui_button_primary" for="xFile">上傳文件</label>
<form>
    <input type="file" id="uploadFile" style="position:absolute;clip:rect(0 0 0 0);">
</form> 
<img id="imgCover" src="./watermark.png" class="clip"> //水印小照片
<p id="compounded"></p> //合成後的照片 
//js 
var eleUploadFile = document.getElementById('uploadFile'); 
var compounded = document.getElementById('compounded');
eleUploadFile.addEventListener('change', function (event) { 
    var file = event.target.files[0]; //獲取圖片資源 
    if (!event.type.match('image.*')) {// 只選擇圖片文件 
        return false; 
    } 
    var reader = new FileReader(); 
    reader.readAsDataURL(file); // 讀取文件 exif(file); //旋轉圖片 reader.onloadend=function(e){ //文件讀取結束 
        var base64 = e.target.result; 
        if (base64.length > 1024 * 50) { 
            console.error('圖片尺寸請小於50K'); 
            return; 
        } 
        var compressImg = compress(base64); //壓縮函數 
        var compoundImg = compoundImg(base64,function(url){ 
            var size = 180 / (window.devicePixelRatio || 1); 
            compounded.innerHTML = '<img src="'+ url +'" width="'+ size +'" height="'+ size +'">'; 
        }) 
    } 
})
複製代碼

2.2圖片壓縮

function compress(readerResult) { //readerResult-->傳入文件base64結果 
    var img = new Image(); 
    img.src = readerResult; 
    if(readerResult.length<80000) { 
        return readerResult ;//小於80K的不壓縮 
    } 
    //用於壓縮圖片的canvas 
    let canvas = document.createElement("canvas"); 
    let ctx = canvas.getContext("2d"); 

    //畫圖區域 
    canvas.width = img.naturalWidth; 
    canvas.height = img.naturalHeight; 
    //鋪底色 
    ctx.fillStyle = "#fff"; 
    ctx.fillRect(0, 0, canvas.width, canvas.height); 
    ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight); 
    //進行最小壓縮 
    var dataURL = canvas.toDataURL("image/jpeg",0.9); 
    return dataURL; 
}
複製代碼

2.3圖片水印

function compoundImg(url,callback) { //url -->合成水印較大的那張圖的base64碼 
    var eleImgCover = document.getElementById('imgCover'); 
    var canvas = document.createElement('canvas'); 
    var size = 180; //水印大小 
    canvas.width = size; 
    canvas.height = size; 
    var context = canvas.getContext('2d'); // 這是上傳圖像 
    var imgUpload = new Image(); 
    imgUpload.onload = function () { // 繪製 
        context.drawImage(imgUpload, 0, 0, size, size, 0,0, size, size); // 再次繪製（繪製上水印小照片） 
        context.drawImage(eleImgCover, 0, 0, size, size, 0,0, size, size); // 回調 callback(canvas.toDataURL('image/png'));
    }; 
    imgUpload.src = url; 
} 
複製代碼

2.4 EXIF.JS 處理圖片方向信息

<script src="EXIF.js"></script> //先引入EXIF.js 
function exif(file) { 
    var Orientation = ''; 
    EXIF.getData(file, function() { 
        console.log(EXIF.pretty(this)); 
        EXIF.getAllTags(this); 
        console.log(EXIF.getTag(this, 'Orientation'));
        Orientation = EXIF.getTag(this, 'Orientation'); //return; }); 
        if (navigator.userAgent.match(/iphone/i)) { //若是方向角不爲1，都須要進行旋轉
            if(Orientation != "" && Orientation != 1){ 
                switch(Orientation){ 
                    case 6://須要順時針（向左）90度旋轉
                        console.log('須要順時針（向左）90度旋轉');
                        break; 
                    case 8://須要逆時針（向右）90度旋轉
                        console.log('須要順時針（向右）90度旋轉'); 
                        break; 
                    case 3://須要180度旋轉 alert('須要180度旋轉');
                        console.log('須要180度旋轉'); 
                        break; 
                } 
            } 
    } 
} 
複製代碼

2.5 html2canvas合成圖片

function html2canvas(node) { // node爲要合成圖片的dom節點
    const weNeedImageUrl = ''
    const scale = window.devicePixelRatio
    // 防止在高倍屏下合成圖片過於模糊
    const createCanvas = document.createElement('canvas')
    createCanvas.width = node.offsetWidth * scale
    createCanvas.height = node.offsetHeight * scale
    const ctx = createCanvas.getContext('2d')
    ctx.scale(scale, scale)
    html2canvas(node, {
        scale: scale,
        dpi: 384,
        canvas: createCanvas,
        width: node.offsetWidth,
        height: node.offsetHeight
      }).then((canvas) => {
        // 合成圖片後的base64碼
        let domToImgUrl = canvas.toDataURL('image/jpeg', 0.92)
        console.log('合成圖片大小：', domToImgUrl.length)
        
        // 下面是將圖片的base64以blob形式上傳到阿里雲文件服務器，獲取圖片地址
        let domImageArr = domToImgUrl.split(',')
        let mime = domImageArr[0].match(/:(.*?);/)[1]                 // 獲取圖像類型
        let decodeData = atob(domImageArr[1])                         // 解碼base64
        let decodeDataLength = decodeData.length
        let uInt8array = new Uint8Array(decodeDataLength)
        //Uint8Array類型數組表示的8位無符號整數數組。內容被初始化爲0
        while (decodeDataLength--) {
            uInt8array[decodeDataLength] = decodeData.charCodeAt(decodeDataLength)
        }
        let blob = new Blob([uInt8array], { type: mime })
        let formData = new FormData()
        formData.append('file', blob, 'image.png')
        // 上傳該圖片到阿里雲
        appUploadFile(formData).then(data => {
            weNeedImageUrl = data.data[0]
            return weNeedImageUrl
        })
    })
    
}
複製代碼