基於 vue.js 實現圖片本地預覽 + 裁剪 + 壓縮 + 上傳的功能（一）

如下代碼涉及 Vue 2.0 及 ES6 語法。

目標

純 javascrpit 實現，兼容ie9及以上瀏覽器，在本地作好文件格式、長寬、大小的檢測，減小瀏覽器交互。

現實是殘酷的，爲了兼容Ie9 仍是用上了 flash，第二篇來解釋解釋。

代碼結構

<div id="wrap">
    <label>
        點我上傳圖片
        <input type='file' @change="change" ref="input">
    </label>
    <img :src="src" ref="img">
</div>

new Vue({
    el: '#wrap',
    data: {
        // 一張透明的圖片
        src:'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', 
        elInput: null
    },
    methods: {
        change(e){
            // ...
        }
    }
})

如何獲取圖片大小

現代瀏覽器中十分簡單

function getSize(e){
    return e.target.files[0].size;
}

但 ie9 下暫時沒有找到純 JS 的方案。
所以，在須要判斷大小時，遇到 ie9 直接繞過不去判斷

如何預覽本地圖片

const refs = this.$refs
const elInput = refs.input
const elImg = refs.img

現代瀏覽器中，經過調用 FileReader 讀取本地圖片，將圖片地址轉成 Base64 格式實現預覽。

function getSrc(){
    const reader = new FileReader();
    reader.onload = (e) => {
        const src = e.target.result;
        elImg.src = src;
    };
    if (elInput.files && elInput.files[0]) {
        reader.readAsDataURL(elInput.files[0]);
    }
}

可是問題又來了，ie9 並不支持 FileReader，但能夠經過 ie 濾鏡顯示。

function getSrc(){
    elInput.select();
    elInput.blur();
    const src = document.selection.createRange().text;
    document.selection.empty();
    elImg.style.filter = `progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='${src}')`;
}

濾鏡中 sizingMethod='scale' 的寫法是爲了圖片能適應內容縮放。

因爲 IE9 對安全限制有所加強，實踐中會遇到如下兩個問題：

• 若是 file 控件得到焦點，則 document.selection.createRange() 拒絕訪問，所以須要在 elInput.select() 後面加一句 elInput.blur() 便可。

• 爲了讓上傳按鈕更美觀，默認給 input[type=file] 的設置了樣式 visible:hidden ，這樣會致使 ie9 下報錯。應該會被瀏覽器認爲欺騙用戶點擊，只好曲線救國。

label{
    overflow:hidden;
}

label input[type='file']{
    position:absolute;
    top:9999px;
    left:9999px;
}

如何獲取圖片長寬

同理，利用 ie 濾鏡和 FileReader 的方案對 ie9 和非 ie9 分別實現。

ie9 的方案

參數 src 接受的是本地圖片路徑

let tempEl;
const getSizeIncompatible = (src, callback) => {
    if (!tempEl) {
        tempEl = document.createElement('div');
        tempEl.style.position = 'absolute';
        tempEl.style.width = '1px';
        tempEl.style.height = '1px';
        tempEl.style.left = '-9999px';
        tempEl.style.top = '-9999px';
        tempEl.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)';
        document.body.insertBefore(tempEl, document.body.firstChild);
    }
    tempEl.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;

    callback(tempEl.offsetWidth, tempEl.offsetHeight);
};

其中 sizingMethod='image' 是爲了圖片顯示原始大小。

非 ie9 方案

參數 src 接受的是 base64 編碼後的圖片路徑

const getSize = (src, callback) => {
    const image = new Image();
    image.onload = () => {
        callback(image.width, image.height);
    };
    image.src = src;
};

參考

• https://elemefe.github.io/ima...