js文件操做總結一：圖片篇

本篇主要涉及到：

• 文件上傳
• 圖片編輯
• 圖片文件下載

---

1、文件上傳

文件上傳目前瞭解的主要有三種方式：

• type="file"的input輸入框
• drop拖放事件；
• 另有"ctrl+V"進行粘貼，可是此方法使用有侷限性，如：不支持windows系統文件的複製粘貼（大概理解爲windows系統的粘貼只是對文件路徑的引用）

一、input文件上傳

html部分

<input id="fileInput" type="file" accept="image/png, image/jpeg">
// accept定義支持的文件類型
複製代碼

js獲取文件

$('#fileInput').on('change', function () {
    fn(this.files[0]);
})
// this.files是一個文件集合，若是一次性上傳多個文件相應就是this.files[0]、this.files[1]...
複製代碼

二、drop拖放文件上傳

html部分能夠是一個div元素就行

<div class="dropBox" id="dropHere">
    <p class="info">把文件拖放到這裏</p>
    <p class="info hide">你上傳的文件是：<span id="fileName"></span></p>
</div>
複製代碼

js操做部分須要對目標元素的ondragenter和ondragover進行阻止默認事件操做，防止瀏覽器直接打開文件

// 拖拽上傳事件
function bandDropEvent (el,fn) {
    el.ondragenter = function (event) {   // 清除默認事件，防止瀏覽器直接打開圖片文件
        event.stopPropagation();
        event.preventDefault();
    };
    el.ondragover = function (event) {   // 清除默認事件，防止瀏覽器直接打開圖片文件
        event.stopPropagation();
        event.preventDefault();
    };
    el.ondrop = function (event) {
        event.stopPropagation();
        event.preventDefault();
        fn(event.dataTransfer.files[0]);
    };
}
複製代碼

更好的作法是在div裏再放一個type='file'的input，而後綁定點擊div事件觸發input的點擊事件，這樣就能夠同時支持點擊及拖放上傳

這裏是一個demo

---

2、圖片編輯

解決完文件上傳以後，接着就須要對文件數據進行操做啦！首先咱們拿圖片文件來練手，這裏咱們分幾個步驟：

一、圖片預覽實現

首先須要瞭解一個API：FileReader；

FileReader 對象容許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。 ---來自MDN

直接上代碼

function file2url(file, fn) {
    const reader = new FileReader();
    reader.addEventListener('load', function () {
        const src = reader.result;
        fn(src);
    }, false);
    reader.readAsDataURL(file);
}
複製代碼

• 一、首先咱們初始化一個 FileReader 的實例 reader ;
• 二、而後咱們監聽實例 reader 的 load 事件，將 reader.result 中包含的數據保存到變量 src
• 三、最後咱們調用 reader.readAsDataURL() 方法處理目標文件 file ；

經過 FileReader.readAsDataURL() 方法，咱們能夠成功將圖片文件轉換成一串以 URL格式的字符串 （base64編碼）表示所讀取文件的內容(FileReader還能夠將文件轉換成文本格式，此處先不涉及),咱們能夠將轉換後的url賦值給img元素的src屬性，這樣就能夠查看圖片預覽了

fileInput.addEventListener('change', function () {
    showFileName(this.files[0]);
    file2url(this.files[0], function (src) {
        document.querySelectorAll('img')[0].src = src;
    })
});
複製代碼

稍微修改一下上一步的demo，讓它實現圖片預覽的功能，點擊這裏查看

二、圖片編輯

熟悉PS的確定知道，在位圖裏整張圖片由N多的像素點組成，每個小的像素點能夠想象成一個小的色塊，N多色塊拼接在一塊兒就成了咱們最終看到的圖片，若是能操做每一個像素點的色值，就可以對圖片進行編輯了，咱們開始吧：

首先仍是一個幾個API：(一個個介紹有點長，請自行點擊連接去查看相關信息)

• 一、CanvasRenderingContext2D.drawImage()：在canvas上繪製目標圖片

• 二、CanvasRenderingContext2D.getImageData()：獲取canvas內容的數據

• 三、CanvasRenderingContext2D.putImageData()：將已有的圖片數據繪製到canvas

試着用這幾個API將圖片反色，主要代碼以下：

// 將圖片反色
function inverse(src) {
    const img = new Image,
        canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
    let w,h,data;
    img.src = src;
    const imgLoad = new Promise((resolve, reject) => {
        img.onload = function () {
            w = this.width;
            h = this.height;
            canvas.width = w;
            canvas.height = h;
            ctx.drawImage(this, 0, 0, w, h);
            data = ctx.getImageData(0, 0, w, h);
            const obj = {
                data: data,
                width: w,
                height: h
            };
            resolve(obj);
        };
    });
    // 改變圖片像素
    imgLoad.then((val) => {
        return new Promise((resolve, reject) => {
            let imgData = val.data.data;
            let w = val.width;
            let h = val.height;
            for(let i = 0; i < h; i++) {        // 遍歷像素點
                for(let j = 0; j < w; j++) {
                    let x = i * 4 * w + 4 * j;
                    imgData[x] = 255 - imgData[x];
                    imgData[x + 1] = 255 - imgData[x + 1];
                    imgData[x + 2] = 255 - imgData[x + 2];
                }
            }
            ctx.putImageData(data, 0, 0);
            resolve(canvas.toDataURL("image/jpeg", 1));
        });
    }).then(function (url) {
        document.querySelector('.showNewImg').src = url;
    });
}
複製代碼

須要注意的地方：

• 文件的操做是異步進行的，此處用了Promise；
• 對像素點的處理用到了嵌套的循環，外層循環X軸，內層循環Y軸上與之交叉的像素點，每個像素點由4個數據表示，分別對應RGBA；

所以R值的下標爲：X軸序號 * 4 * 圖片寬度 + Y軸序號 * 4

G值的下標爲R值下標+1，B值的下標爲R值下標+2，A值的下標爲R值下標+3

將圖片反色的demo，點擊這裏查看。

---

編輯後的圖片文件下載

下載的實現這裏用到的是a標籤的download屬性；

主要代碼以下：

function download(url, fileName) {
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName;
    link.click();
}
複製代碼

增長下載功能的demo，點擊這裏查看。

總結

• 圖片的操做還能實現不少其餘的效果，貼一個以前寫的二維碼圖片合成頁面，這個頁面寫的比較早，代碼有點亂，不過本篇內容出自對該頁面的梳理；

• 接下來還會繼續整理，dom轉換圖片，.html文件編輯等其餘文件相關操做；

• PS：本篇主要對圖片的操做作了個簡單的總結，代碼的實現並無考慮兼容等（最喜歡寫demo這種無拘無束放飛自個人感受），限於做者能力有限，相關代碼僅做示範，若有不足，煩請告知，謝謝