摘要：表示不一定是原生形式的數(shù)據(jù)。接口基于，繼承了的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件。讀取操作完成的時(shí)候，會(huì)變成已完成，并觸發(fā)事件，同時(shí)屬性將包含一個(gè)格式的字符串編碼以表示所讀取文件的內(nèi)容。

溫馨提示：這里除了一些幼稚的小組件啥也沒有
溫馨提示-續(xù)：這是一個(gè)新的系列，寫一些實(shí)際開發(fā)中遇到的一些常用的功能，想法笨拙，代碼亂套

圖片上傳，作為web端一個(gè)常用的功能，在不同的項(xiàng)目中有不同的需求，在這里實(shí)現(xiàn)一個(gè)比價(jià)基本的上傳圖片插件，主要能實(shí)現(xiàn)圖片的瀏覽，剪裁，上傳這三個(gè)功能，同時(shí)也是為了讓自己對(duì)圖片／文件上傳和HTML5中名聲在外的canvas相關(guān)能夠有一些了解

上傳到了github上，覺得好的給星哦！l-imgupload //181119

放眼WWW，一般的圖片上傳模塊，主要就是實(shí)現(xiàn)了三個(gè)功能，圖片的預(yù)覽，圖片的剪裁及預(yù)覽，圖片的上傳，那我也就整這么一個(gè)吧，再細(xì)化一下需求

用戶使用：用戶點(diǎn)擊“選擇圖片”，彈出文件瀏覽器，可以選擇本地的圖片，點(diǎn)擊確認(rèn)后，所選圖片會(huì)按照原始比例出現(xiàn)在頁(yè)面的瀏覽區(qū)域中
組件調(diào)用：開發(fā)者可以自己定義圖片預(yù)覽區(qū)域的大小，并限定所傳圖片的文件大小和尺寸大小

用戶使用：用戶根據(jù)提示，在預(yù)覽區(qū)域的圖片上拖動(dòng)鼠標(biāo)框出想要上傳的圖片區(qū)域，并且能在結(jié)果預(yù)覽區(qū)域看到自己的剪裁結(jié)果
組件調(diào)用：開發(fā)者可以自定義是否剪裁圖片，并可以定義是否限定剪裁圖片的大小及比例，并且設(shè)定具體大小及比例

用戶使用：用戶點(diǎn)擊“圖片上傳”，圖片開始上傳，現(xiàn)實(shí)“上傳中…”，完成后顯示“上傳完成”
組件調(diào)用：開發(fā)者得到base64格式的urlData圖片，自己編寫調(diào)用Ajax的函數(shù)及其回調(diào)函數(shù)

作為設(shè)計(jì)師，扔圖是我的最愛，畫了一套全功能，包含剪裁及剪裁瀏覽的原型圖

state-1:初始狀態(tài)

state-2:點(diǎn)擊"選擇圖片"，瀏覽本地后載入圖片

state-3:剪裁，在圖片區(qū)域上拖動(dòng)鼠標(biāo)選擇要剪裁的部分，確認(rèn)要上傳的部分

自打干上web開發(fā)這活，就都是在搗鼓瀏覽器內(nèi)部這點(diǎn)事，從沒想過跟瀏覽器之外計(jì)算機(jī)本地的一些文件能發(fā)生什么關(guān)系。但是該來的總要來，既然要上傳圖片，就肯定要從計(jì)算機(jī)本地來選擇文件并在瀏覽器內(nèi)打開，這歷史性的對(duì)話就要這么開啟了…

其實(shí)在HTML中的標(biāo)簽就提供了瀏覽本地文件的功能，前提是type="file"，真是很講道理… 試過就知道一點(diǎn)擊就會(huì)打開文件瀏覽器

但這么做有兩個(gè)經(jīng)典的問題：
第一，會(huì)有一個(gè)輸入框傻乎乎的在那里…
第二，我用的是Ajax，怎么才能get到表單當(dāng)中的文件呢

對(duì)于問題一，很好解決直接各種方式hide這個(gè)input標(biāo)簽即可，再主動(dòng)觸發(fā)click()

var imgFrom = document.getElementById("inputArea");
function loadImg(){
    imgFrom.click(); 
}

對(duì)于問題二，這就要介紹一下FormData對(duì)象了

XMLHttpRequest Level 2添加了一個(gè)新的接口FormData.利用FormData對(duì)象,我們可以通過JavaScript用一些鍵值對(duì)來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個(gè)"表單".比起普通的ajax,使用FormData的最大優(yōu)點(diǎn)就是我們可以異步上傳一個(gè)二進(jìn)制文件.
摘自MDN Web docs - Web技術(shù)文檔／Web API 接口／FormData

正如上面的文檔所說FormData對(duì)象可以干的事無非就是用javascript模擬表單控件，也正因?yàn)槿绱怂钥梢栽谀M的表單中放入一個(gè)文件

var myFrom = new FormData();
var imageData = imgFrom.files[0];//獲取表單中第一個(gè)文件
myFrom.append("image",imageDate);//向表單中添加一個(gè)鍵值對(duì)
console.log(myFrom.getAll("image"));//獲取表單中image字段對(duì)應(yīng)的值，結(jié)果見下圖

正如我們所見，文件我們已經(jīng)通過Web拿到手了

既然是要上傳圖片，我們肯定得知道自己傳的是啥圖片啊，所以下一步就是如何把讀取的圖片展現(xiàn)在頁(yè)面上了，正如上圖中的顯示，我的得到的圖片是一個(gè)File對(duì)象，而File對(duì)象是特殊的Blob對(duì)象，那Blob對(duì)象又是個(gè)啥呢…

Blob 對(duì)象表示不可變的類似文件對(duì)象的原始數(shù)據(jù)。Blob表示不一定是JavaScript原生形式的數(shù)據(jù)。File 接口基于Blob，繼承了 blob的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件。
摘自MDN Web docs - Web技術(shù)文檔／Web API 接口／Blob

說實(shí)話，真是懵逼
但仔細(xì)理解下大概意思就是Blob對(duì)象是用來表示／承載文件對(duì)象的原始數(shù)據(jù)（二進(jìn)制）的，借助一些博文會(huì)有助于理解
js中關(guān)于Blob對(duì)象的介紹與使用 - 可樂Script
HTML5 Blob對(duì)象 - zdy0_2004
說到底，重點(diǎn)不在這，了解一下有個(gè)概念即可，重點(diǎn)在于我們?cè)趺凑故具@個(gè)File對(duì)象

這就要請(qǐng)出FileReader對(duì)象了

FileReader 對(duì)象允許Web應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對(duì)象指定要讀取的文件或數(shù)據(jù)。
摘自MDN Web docs - Web技術(shù)文檔／Web API 接口／FileReader

不難看出，FileReader對(duì)象就是用來讀取本地文件的，而這其方法readAsDataURL()就是我們要用的東西啦

該方法會(huì)讀取指定的 Blob 或 File 對(duì)象。讀取操作完成的時(shí)候，readyState 會(huì)變成已完成（DONE），并觸發(fā) loadend 事件，同時(shí) result 屬性將包含一個(gè)data:URL格式的字符串（base64編碼）以表示所讀取文件的內(nèi)容。
摘自MDN Web docs - Web技術(shù)文檔／Web API 接口／FileReader／FileReader.readAsDataURL()

這里面又提到一個(gè)新名詞data:URL，也就是說readAsDataURL()的作用就是能把文件轉(zhuǎn)換為data:URL，不過這個(gè)data:URL又是什么呢，執(zhí)行來看看

var reader = new FileReader(); //調(diào)用FileReader對(duì)象
reader.readAsDataURL(imgData); //通過DataURL的方式返回圖像
reader.onload = function(e) {                
    console.log(e.target.result);//看看你是個(gè)啥
} 

控制臺(tái)的結(jié)果全臉懵逼

可以通過這篇文章去大概了解一下DATA URL簡(jiǎn)介及DATA URL的利弊 - 薛陳磊

說到底這dataURL我就粗略的理解它為URL形式的data，也就是說這段URL并不是與普通的URL一樣指向某個(gè)地址，而是它本身就是數(shù)據(jù)，我們?cè)囍堰@一堆字符粘到一個(gè)的src屬性中

終于看到了，結(jié)果正如所料，將這段包含了數(shù)據(jù)的URL賦給一個(gè)確實(shí)可以讓數(shù)據(jù)被展現(xiàn)為圖片
至此，我們實(shí)現(xiàn)了本地文件的讀取及展現(xiàn)

溫馨提示-亂入：看明白這里需要對(duì)canvas有基本的了解MDN Web docs - Web技術(shù)文檔／Web API接口／Canvas／Canvas教程

在Web上對(duì)圖像進(jìn)行操作，沒有比canvas相關(guān)技術(shù)更合適的了，所以本文用canvas技術(shù)來實(shí)現(xiàn)對(duì)圖片的截取

在上文中，我們利用展現(xiàn)出了我們選擇的圖片，但是我們的圖片截取功能可是要利用來實(shí)現(xiàn)的，所以怎么在中展現(xiàn)我們剛才獲取的圖片就是下一步要干的事情了

canvas的API中自帶drawImage()函數(shù)，其作用就是在中渲染一張圖片出來，其可以支持多種圖片來源見MDN Web docs - Web技術(shù)文檔／Web API接口／CanvasRenderingContext2D／CanvasRenderingContext2D.drawImage()

最簡(jiǎn)單的，我們直接把剛剛顯示圖片的那個(gè)傳入是不是就可以呢

var theCanvas = document.getElementById("imgCanvas");
var canvasImg = theCanvas.getContext("2d");//獲取2D渲染背景
var img = document.getElementById("image");
img.onload = function(){//確認(rèn)圖片已載入    
    canvasImg.drawImage(img,0,0);
}

結(jié)果如下

從圖中看，左側(cè)是之前的""，右側(cè)是渲染了圖片信息的
這么看來雖然成功？在中渲染出了圖片但是有兩個(gè)明顯的問題

1.左邊的""留著干啥？
2.右邊看上去是不是有點(diǎn)不一樣？

這倆問題其實(shí)都好辦，針對(duì)第一個(gè)問題，我們其實(shí)可以根本不用實(shí)體的""直接利用"Image"對(duì)象即可，第二個(gè)問題明顯是因?yàn)?b>的大小與獲取到的圖片大小不一致所產(chǎn)生的，綜合這兩點(diǎn)，對(duì)代碼進(jìn)行進(jìn)化！

var theCanvas = document.getElementById("imgCanvas");
var canvasImg = theCanvas.getContext("2d");
var img = new Image();//創(chuàng)建img對(duì)象

reader.onload = function(e) {                
    img.src = e.target.result;
}
 
img.onload = function(){
    theCanvas.Width = img.width;//將img對(duì)象的長(zhǎng)款賦給canvas標(biāo)簽
    theCanvas.height = img.height;    
    canvasImg.drawImage(img,0,0);
}

結(jié)果與我們所期待的一樣，至此我們成功的在""中展現(xiàn)了從本地獲取的圖片

其實(shí)截圖，說白了就是在一個(gè)圖像上，獲取某個(gè)區(qū)域中的圖像信息
canvas作為專門用來處理圖像及像素相關(guān)的一套API，獲取區(qū)域中的相關(guān)圖像信息可以說是再簡(jiǎn)單不過的事情，利用getImageData()函數(shù)即可 //詳情，當(dāng)然我們不光要把圖像信息獲取到，最好還能展現(xiàn)出來我們的截圖結(jié)果，這里就要用到與之相對(duì)的putImageData()函數(shù) //詳情

var resultCanvas = document.getElementById("resultCanvas");
var resultImg = resultCanvas.getContext("2d");
var cutData = canvasImg.getImageData(100,100,200,200);
resultImg.putImageData(cutData,0,0);

結(jié)果如圖

既然這個(gè)工具是面向用戶的，截圖的過程肯定是要所見即所得的，在函數(shù)getImageData()中有4個(gè)參數(shù)，分別是截圖起點(diǎn)的兩個(gè)坐標(biāo)和區(qū)域的寬度及高度，所以問題就變成了如何更合理的讓用戶輸入這4個(gè)值。
其實(shí)現(xiàn)存的主流解決方案就做的非常好了：在圖上拖動(dòng)鼠標(biāo)，拉出一個(gè)框，這個(gè)框內(nèi)就是用戶希望截取的區(qū)域。

在畫布上畫出一個(gè)框很簡(jiǎn)單，只需用到strokeRect()函數(shù) //詳情
但是讓用戶自己拖出一個(gè)框就比較復(fù)雜了，先分析一下用戶的一套動(dòng)作都有什么

用戶選定起始點(diǎn)，點(diǎn)下鼠標(biāo)左鍵

用戶選定截圖區(qū)域的大小，保持鼠標(biāo)左鍵不抬起，同時(shí)移動(dòng)鼠標(biāo)選擇

用戶完成選擇，抬起鼠標(biāo)左鍵

回過頭再來看程序需要干什么

獲取起始點(diǎn)的坐標(biāo)，并記錄為已點(diǎn)擊狀態(tài)

判斷一下如果為已點(diǎn)擊狀態(tài)那么，獲取每一次移動(dòng)／幀的鼠標(biāo)坐標(biāo)，并計(jì)算出與起始點(diǎn)之間的橫縱坐標(biāo)距離，而這距離就是所畫框的長(zhǎng)度和寬度，清除上一幀的整個(gè)畫面，再繪制一個(gè)新的圖片再畫一個(gè)新的框，同時(shí)按照框的起始坐標(biāo)及寬高，截取圖像信息，再清除預(yù)覽區(qū)域的上一幀的畫布，再將這一幀的圖像信息載入

鼠標(biāo)抬起后，停止記錄及繪制，保持最終一幀的框停留在畫面上

在這里，要說明一下，為什么非要清除整個(gè)畫面不可，其實(shí)可以把通過canvas.getContext("2d")獲取到的2D 畫布的渲染上下文 //詳情 就當(dāng)作一塊畫布，已經(jīng)渲染出來的東西就已經(jīng)留在了上面，無法再修改，如果想要更改畫面上已經(jīng)存在的元素的大小位置形狀等等屬性，那么在程序?qū)用?，?strong>只能（個(gè)人理解，不一定對(duì)，如果有問題請(qǐng)一定跟我嘮嘮）把之前的畫布清空再重新渲染。

這個(gè)思路與我們之前端開發(fā)中動(dòng)畫相關(guān)的開發(fā)思路不同，并不是像之前那樣直接操作現(xiàn)有元素屬性就可以改變?cè)撛卦诋嬅嫔系某尸F(xiàn)結(jié)果的，而在這里其實(shí)更像是在現(xiàn)實(shí)生活中的動(dòng)畫制作原理就是

每一幀都需要重新繪制整張畫面

而其實(shí)這是任何動(dòng)畫渲染方式的最底層思路與行為

話說回來按照上文相關(guān)的開發(fā)思路，實(shí)現(xiàn)這個(gè)功能的代碼如下

var flag = false;//記錄是否為點(diǎn)擊狀態(tài)的標(biāo)記
var W = img.width;
var H = img.height;
var startX = 0;
var startY = 0;

//當(dāng)鼠標(biāo)被按下
theCanvas.addEventListener("mousedown", e => {
    flag = true;//改變標(biāo)記狀態(tài)，置為點(diǎn)擊狀態(tài)
    //startX = e.clientX;//獲得起始點(diǎn)橫坐標(biāo)
    //startY = e.clientY;//獲得起始點(diǎn)縱坐標(biāo)
    //添加于2018.3.6:
    //這里有些問題，在本文的條件下e.clientX是對(duì)的，可是其實(shí)是應(yīng)該為相對(duì)對(duì)象的坐標(biāo)而不是瀏覽器，所以應(yīng)該為e.offsetX 感謝 @高遠(yuǎn) 同學(xué)提醒
    startX = e.offsetX;//獲得起始點(diǎn)橫坐標(biāo)
    startY = e.offsetY;//獲得起始點(diǎn)縱坐標(biāo)
})

//當(dāng)鼠標(biāo)在移動(dòng)
theCanvas.addEventListener("mousemove", e => {
    if(flag){//判斷鼠標(biāo)是否被拖動(dòng)
        canvasImg.clearRect(0,0,W,H);//清空整個(gè)畫面
        canvasImg.drawImage(img,0,0);//重新繪制圖片
        canvasImg.strokeRect(startX, startY, e.clientX - startX, e.clientY - startY);//繪制黑框
        resultImg.clearRect(0,0,cutData.width,cutData.height);//清空預(yù)覽區(qū)域
        cutData = canvasImg.getImageData(startX, startY, e.clientX - startX, e.clientY - startY);//截取黑框區(qū)域圖片信息
        resultImg.putImageData(cutData,0,0);//將圖片信息賦給預(yù)覽區(qū)域
    }
})

//當(dāng)鼠標(biāo)左鍵抬起
theCanvas.addEventListener("mouseup", e => {
    flag = false;//將標(biāo)志置為已抬起狀態(tài)
})

結(jié)果如圖

主要吧，這個(gè)黑框太丑了，透露著一種原始和狂野，以及來自工科男審美的粗糙感…
能不能弄的好看點(diǎn)，起碼讓它看上去是一個(gè)工具不是一個(gè)實(shí)驗(yàn)

我的想法是這樣的，待被截取的圖片上應(yīng)該蒙上一層半透明白色遮罩，用戶框選出的部分是沒有遮罩的，這樣效果可以為功能增加視覺上的材質(zhì)感及舒適感，同時(shí)顯得高端

具體效果是這樣的-下圖來自ps

是不是稍微好些了

可是，怎么實(shí)現(xiàn)？
簡(jiǎn)單來說，就是在原有的畫布上再蒙半透明的一層畫布，然后讓這一層有一部分是沒有的就可以實(shí)現(xiàn)了，總的來說就是蒙版和遮罩的思路，在canvas中也有相關(guān)的api，但是我愣是沒看明白
負(fù)責(zé)任的貼一個(gè)鏈接

不過開發(fā)就是這樣，條條大路出bug
我想到這個(gè)功能的瞬間腦子像抽了一樣，出現(xiàn)了這么一種實(shí)現(xiàn)方法

見下圖

mask層可以分為A，B，C，D四個(gè)矩形區(qū)域，在圖中兩個(gè)藍(lán)色的點(diǎn)是已知的（用戶自己畫出來的），在下層圖片大小已知的前提下，這四個(gè)矩形區(qū)域的四個(gè)點(diǎn)都是可以計(jì)算出來的，從而其高度和寬度也可以計(jì)算出來，這樣就可以利用這些數(shù)據(jù)畫出一個(gè)半透明的矩形，將四個(gè)半透明矩形都畫出來后，就能夠?qū)崿F(xiàn)之前設(shè)計(jì)出的效果了，具體代碼如下

theCanvas.addEventListener("mousemove", e => {
    if(flag){
        canvasImg.clearRect(0,0,W,H);
        resultImg.clearRect(0,0,cutData.width,cutData.height);
        canvasImg.drawImage(img,0,0);
        canvasImg.fillStyle = "rgba(255,255,255,0.6)";//設(shè)定為半透明的白色
        canvasImg.fillRect(0, 0, e.clientX, startY);//矩形A
        canvasImg.fillRect(e.clientX, 0, W, e.clientY);//矩形B
canvasImg.fillRect(startX, e.clientY, W-startX, H-e.clientY);//矩形C
        canvasImg.fillRect(0, startY, startX, H-startY);//矩形D
        cutData = canvasImg.getImageData(startX, startY, e.clientX - startX, e.clientY - startY);
        resultImg.putImageData(cutData,0,0);
    }
})

效果如圖

沒有什么把自己的腦殘想法實(shí)現(xiàn)更爽的了

至此，截圖的基本功能都實(shí)現(xiàn)了，但還差最后一步

圖片已經(jīng)截出來了，下一步就是怎么上傳了，通過Ajax上傳，需要將圖像數(shù)據(jù)轉(zhuǎn)化為File，而在canvas的API中自帶toBlob()函數(shù) //詳情

var resultFile = {}
theCanvas.addEventListener("mouseup", e => {
    resultCanvas.toBlob(blob => {
            resultFile = blob;
            console.log(blob);//Blob(1797) {size: 1797, type: "image/png"}
        }
    })
    flag = false;
})

然后就可以用Ajax上傳拉，具體怎么上傳就需要具體問題具體分析了

至此，整個(gè)插件的思路及需要用到相關(guān)技術(shù)都捋清楚了，接下來就可以開始按照上文的需求進(jìn)行開發(fā)了，而這是下一篇文章要講的事情了

能看到這的絕對(duì)很閑
這篇文章的長(zhǎng)度讓我想起讀研時(shí)被畢業(yè)論文統(tǒng)治的恐懼
本來想著連同組件開發(fā)一起在一篇內(nèi)寫完呢，但是實(shí)在太長(zhǎng)還是放棄了
身體和家人都是最重要的，今年還沒過一個(gè)月就被上了很多課

前端時(shí)間寫完了實(shí)踐是檢驗(yàn)程序員的唯一標(biāo)準(zhǔn)02：用戶不想跟你說話并向你扔出一張圖片 - 圖片上傳組件開發(fā)【開發(fā)篇】，逐行代碼說明的- -

增加了選框拖拽功能，并且上傳到了github上，覺得好的給星哦！l-imgupload