摘要：決定自己寫(xiě)一個(gè)移動(dòng)端圖片上傳組件。允許多選，加上事件的回調(diào)函數(shù)。在的回調(diào)函數(shù)中，我們能通過(guò)拿到所選擇的文件，但是文件是無(wú)法展示在頁(yè)面上的，通常的做法是使用轉(zhuǎn)為然后展示在頁(yè)面上。

前段時(shí)間項(xiàng)目重構(gòu)，改成SSR的項(xiàng)目，但之前用的圖片選擇上傳組件不支持SSR（server-side-render）。遂進(jìn)行了調(diào)研，發(fā)現(xiàn)很多的工具。但有的太大，有的使用麻煩，有的不滿足使用需求。決定自己寫(xiě)一個(gè)h5移動(dòng)端圖片上傳組件。圖片上傳是一個(gè)比較普遍的需求，PC端還好，移動(dòng)端就不是特別好做了。下面將過(guò)程中一些重點(diǎn)的問(wèn)題進(jìn)行簡(jiǎn)單的記錄。

選擇功能使用標(biāo)簽實(shí)現(xiàn)。屬性accept="image/*"，：capture表示，可以捕獲到系統(tǒng)默認(rèn)的設(shè)備，比如：camera--照相機(jī)；camcorder--攝像機(jī)；microphone--錄音。如果設(shè)置了capture="camera"，那么默認(rèn)使用相機(jī)，存在部分機(jī)型無(wú)法調(diào)用相機(jī)的問(wèn)題，我們這里不設(shè)置。允許多選multiple，加上onchange事件的回調(diào)函數(shù)。最終input大概長(zhǎng)這個(gè)樣子：

當(dāng)然，這個(gè)input很丑，我們可以通過(guò)設(shè)置`opacity:0`,通過(guò)定位將我們需要的選擇按鈕樣式覆蓋上去。讓它更加迷人一些。

選擇圖片后能預(yù)覽是一個(gè)常見(jiàn)的功能，這里拋開(kāi)樣式，只說(shuō)代碼實(shí)現(xiàn)。在onchange的回調(diào)函數(shù)中，我們能通過(guò)e.target.files拿到所選擇的文件，但是文件是無(wú)法展示在頁(yè)面上的，通常的做法是使用reader.readAsDataURL(file)轉(zhuǎn)為base64然后展示在頁(yè)面上。我這邊采用九宮格展示，每個(gè)圖片是一個(gè)canvas。考慮到不同圖片寬高比的問(wèn)題，我先通過(guò)reader.readAsDataURL(file)拿到base64文件。然后創(chuàng)建一個(gè)通過(guò)九宮格的canvas寬高比繪制圖像，使圖片內(nèi)容在不失真的情況下鋪滿整個(gè)canvas。

fileToCanvas (file, index) {//文件
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (event) => {
            let image = new Image();
            image.src = event.target.result;
            image.onload = () => {
                let imageCanvas = this["canvas" + index].getContext("2d");
                let canvas = { width: imageCanvas.canvas.scrollWidth * 2, height: imageCanvas.canvas.scrollHeight * 2 };
                let ratio = image.width / image.height;
                let canvasRatio = canvas.width / canvas.height;
                let xStart = 0; let yStart = 0; let renderableWidth; let renderableHeight;
                if (ratio > canvasRatio) { 
                // 橫向過(guò)大，以高為準(zhǔn)，縮放寬度
                    let hRatio = image.height / canvas.height;
                    renderableHeight = image.height;
                    renderableWidth = canvas.width * hRatio;
                    xStart = (image.width - renderableWidth) / 2;
                }
                if (ratio < canvasRatio) { 
                // 橫向過(guò)小，以寬為準(zhǔn)，縮放高度
                    let wRatio = image.width / canvas.width;
                    renderableWidth = image.width;
                    renderableHeight = canvas.height * wRatio;
                    yStart = (image.height - renderableHeight) / 2;
                }
                imageCanvas.drawImage(image, xStart, yStart, renderableWidth, renderableHeight, 0, 0, canvas.width * 2, canvas.height);
            };
        };
    }

部分機(jī)型拍照時(shí)文件通過(guò)onchange事件拿到的文件是blob（小米6等）此時(shí)通過(guò)blob.type手動(dòng)判斷擴(kuò)展名。

當(dāng)ios拍照上傳后發(fā)現(xiàn)文件被旋轉(zhuǎn)了，本地文件確是正常的，這個(gè)問(wèn)題的原因這里不作詳細(xì)解釋。有興趣的可以搜一下。所以我們需要檢測(cè)orientation，并將圖像旋轉(zhuǎn)回正常方向。獲取orientation有現(xiàn)成的很多庫(kù)如Exif.js。但是這個(gè)庫(kù)有些大，為了這個(gè)小需求引入似乎不太值得。stackoverflow上有很多現(xiàn)成的獲取圖片方向的代碼。
稍微改了下：

getOrientation (file) {
        return new Promise((resolve, reject) => {
            let reader = new FileReader();
            reader.onload = function (e) {
            //e.target.result為base64編碼的文件
                let view = new DataView(e.target.result);
                if (view.getUint16(0, false) !== 0xffd8) {
                    return resolve(-2);
                }
                let length = view.byteLength;
                let offset = 2;
                while (offset < length) {
                    let marker = view.getUint16(offset, false);
                    offset += 2;
                    if (marker === 0xffe1) {
                        let tmp = view.getUint32(offset += 2, false);
                        if (tmp !== 0x45786966) {
                            return resolve(-1);
                        }
                        let little = view.getUint16(offset += 6, false) === 0x4949;
                        offset += view.getUint32(offset + 4, little);
                        let tags = view.getUint16(offset, little);
                        offset += 2;
                        for (let i = 0; i < tags; i++) {
                            if (view.getUint16(offset + i * 12, little) === 0x0112) {
                                return resolve(view.getUint16(offset + i * 12 + 8, little));
                            }
                        }
                    } else if ((marker & 0xff00) !== 0xff00) {
                        break;
                    } else {
                        offset += view.getUint16(offset, false);
                    }
                }
                return resolve(-1);
            };

            reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
        });
    }

//返回值：1--正常，-2--非jpg，-1--undefined

正常的圖像orientation應(yīng)該是1，于是我們將file轉(zhuǎn)為canvas，使用canvas的transform方法對(duì)canvas進(jìn)行變換, 參考。最后通過(guò)canvas.toDataURL("")拿到base64編碼的方向正常的base64圖片，再將base64轉(zhuǎn)為blob進(jìn)行上傳;

    //重置文件orientation
resetOrientationToBlob (file, orientation) {
    return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (event) => {
            let image = new Image();
            image.src = event.target.result;
            image.onload = () => {
                let width = image.width;
                let height = image.height;
                let canvas = document.createElement("canvas");
                let ctx = canvas.getContext("2d");
                if (orientation > 4 && orientation < 9) {
                    canvas.width = height;
                    canvas.height = width;
                } else {
                    canvas.width = width;
                    canvas.height = height;
                }

                switch (orientation) {
                case 2:
                    ctx.transform(-1, 0, 0, 1, width, 0);
                    break;
                case 3:
                    ctx.transform(-1, 0, 0, -1, width, height);
                    break;
                case 4:
                    ctx.transform(1, 0, 0, -1, 0, height);
                    break;
                case 5:
                    ctx.transform(0, 1, 1, 0, 0, 0);
                    break;
                case 6:
                    ctx.transform(0, 1, -1, 0, height, 0);
                    break;
                case 7:
                    ctx.transform(0, -1, -1, 0, height, width);
                    break;
                case 8:
                    ctx.transform(0, -1, 1, 0, 0, width);
                    break;
                default:
                    ctx.transform(1, 0, 0, 1, 0, 0);
                }

                ctx.drawImage(image, 0, 0, width, height);
                let base64 = canvas.toDataURL("image/png");
                let blob = this.dataURLtoBlob(base64);
                resolve(blob);
            };
        };
    });

}

圖片上傳，這部分應(yīng)該比較easy。通過(guò)FormData的形式將文件上傳即可。以上代碼僅是部分功能的偽代碼，不是所有功能的最終實(shí)現(xiàn)。

能折騰就折騰一下，最后你會(huì)發(fā)現(xiàn)，學(xué)到了很多東西，但還是別人的輪子好用2333。