摘要：表示的不一定是原生格式的數(shù)據(jù)。接口基于，繼承了的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件。要從其他非對(duì)象和數(shù)據(jù)構(gòu)造一個(gè)，請(qǐng)使用構(gòu)造函數(shù)。要?jiǎng)?chuàng)建包含另一個(gè)數(shù)據(jù)的子集，請(qǐng)使用方法。要獲取用戶文件系統(tǒng)上的文件對(duì)應(yīng)的對(duì)象，請(qǐng)參閱文檔。

封好的插件不用寫html啦，直接new一個(gè)就好了

GitHub地址：https://github.com/Joeoeoe/pr...
兩張小豬佩奇的圖也送給大家

本來(lái)感覺(jué)沒(méi)什么好寫的，還是寫一下作為第一個(gè)插件的留念吧
應(yīng)該存在很多性能問(wèn)題或細(xì)節(jié)問(wèn)題，望有大神指教

demo如圖：

樣式就在CSS文件里修改啦

目錄

一.使用的工具，關(guān)鍵概念及思路
二.關(guān)鍵的實(shí)現(xiàn)操作
1.圖片大小縮放
2.Jcrop的使用
3.canvas繪圖實(shí)現(xiàn)裁剪
4..重新選擇圖片問(wèn)題
三.不足之處
1.無(wú)法過(guò)濾圖片太大的情況
2.調(diào)整圖片大小不知是否過(guò)于繁瑣

簡(jiǎn)單介紹使用的庫(kù)——Jcrop（需要配合jQuery用）：Jcrop是一個(gè)jQuery圖像裁剪插件，通過(guò)設(shè)置參數(shù)與調(diào)用API滿足裁剪過(guò)程的需求，如：設(shè)置裁剪框的最大大小，裁剪時(shí)的幕布顏色等等，具體百度Jcrop吧

Blob與File， 的files，F(xiàn)ileReader，canvas下的CanvasRenderingContext2D.drawImage()

1.Blob與File:
直接MDN解釋：
“Blob 對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類文件對(duì)象。Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)。File 接口基于Blob，繼承了 blob 的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件。
要從其他非blob對(duì)象和數(shù)據(jù)構(gòu)造一個(gè)Blob，請(qǐng)使用 Blob() 構(gòu)造函數(shù)。要?jiǎng)?chuàng)建包含另一個(gè)blob數(shù)據(jù)的子集blob，請(qǐng)使用 slice()方法。要獲取用戶文件系統(tǒng)上的文件對(duì)應(yīng)的Blob對(duì)象，請(qǐng)參閱 File文檔?！?br>簡(jiǎn)單地說(shuō)：File可以取得系統(tǒng)里的文件，Blob不行

2. 的files：
input元素下有files屬性，返回的是一個(gè)FileList對(duì)象(我理解為一個(gè)類數(shù)組)，這個(gè)對(duì)象包含了許多File文件（作為元素）的列表（為input附加屬性multiple 即可上傳多個(gè)文件）

直接console.log看看吧

這是FileList

這是File

可是這樣我們并沒(méi)辦法直接獲取圖片，接下來(lái)就要用FileReader了

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

var reader = new FileReader();
簡(jiǎn)而言之，即FileReader可以讀取File或者Blob的內(nèi)容
我們將使用reader.readAsDataURL()方法讀取內(nèi)容，此方法將讀取內(nèi)容放在reader.result屬性中，這樣我們就可以獲得上傳文件的數(shù)據(jù)了

把這串?dāng)?shù)據(jù)插進(jìn) 的src就可以顯示圖片了

FileReader的具體屬性與方法請(qǐng)大家看MDN吧

4.canvas下的CanvasRenderingContext2D.drawImage()方法：

此方法我們用于渲染裁剪出來(lái)的圖片

這里我們舉個(gè)例子說(shuō)明下吧
var canvas = document.getElementById("canvas");
var canvasPen = canvas.getContext("2d");
我喜歡把canvas的2d上下文環(huán)境比作一支筆，這里的canvasPen就是CanvasRenderingContext2D了

方法參數(shù)的三種格式：
canvasPen.drawImage(image, dx, dy)
canvasPen.drawImage(image, dx, dy, dWidth, dHeight)
canvasPen.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
MDN說(shuō)明：https://developer.mozilla.org...

這里我們根據(jù)應(yīng)用需要我們用第三種參數(shù)格式，具體演示MDN已經(jīng)說(shuō)的很清楚啦

思路：

看完上面的關(guān)鍵概念我覺(jué)得大家可能也大概知道如何實(shí)現(xiàn)了吧
1.用 上傳圖片
2.FileReader獲取文件信息
3.獲取的data給予新建的img元素
4.img元素插入div，引入Jcrop插件
5.調(diào)用Jcrop的Api，獲取虛線框的位置，長(zhǎng)寬等
6.長(zhǎng)寬位置等信息賦予drawImage進(jìn)行繪圖
7.canvas.toDataURL()方法，將內(nèi)容導(dǎo)出為base64
8.上傳后臺(tái)

//圖像縮小
while (self.shrinkPicWidth > areaWidth || self.shrinkPicHeight > areaHeight){
                    self.scale = Math.min(areaWidth/self.shrinkPicWidth , 
                    areaHeight/self.shrinkPicHeight);
                    self.shrinkPicWidth = self.shrinkPicWidth * self.scale;
                    self.shrinkPicHeight = self.shrinkPicHeight * self.scale;
                    self.resultScale = self.resultScale * self.scale;
                }

一個(gè)簡(jiǎn)單的循環(huán)，解釋下各個(gè)變量
areaWidth/areaHeight：放上傳圖片區(qū)的寬和高
shrinkPicWidth/shrinkPicHeight： 比例縮小后圖片的寬和高
scale：每次循環(huán)縮小比例
resultscScale：累計(jì)縮小的比例，最后的drawImage()方法需要用到

這里摘取了完成代碼后的一部分，下面逐一解釋下吧

//要在圖片加載完后使用腳本
insert_jcrop : function () {
    var self =this;
    //設(shè)為對(duì)象
    self.jcropObject = $.Jcrop("#target",{    //調(diào)用img的id為target
    allowSelect : false,
    bgColor : "black",
    minSize : [50,50],
    maxSize : [this.previewBoxWidth,this.previewBoxHeight],
    onChange : function () {
            self.render();
    },
    onSelect : function () {
            self.render();
    }
});

self.jcropObject = $.Jcrop( img的id , { 參數(shù)設(shè)置(用花括號(hào)括起來(lái)) } ) //具體參數(shù)大家就自行百度吧
"#target" : id被設(shè)為target的img，即能夠調(diào)用Jcrop的img
render()函數(shù)：寫在插件里的函數(shù)，用于渲染內(nèi)容到canvas上，下面來(lái)介紹render函數(shù)

render : function () {
        var self = this;
        self.previewCanvasPen.clearRect(0,0,self.previewBoxWidth,self.previewBoxHeight);

        self.startX = self.jcropObject.tellScaled()["x"] /self.resultScale;
        self.startY = self.jcropObject.tellScaled()["y"] /self.resultScale;
        self.clipWidth = self.jcropObject.tellScaled()["w"]/self.resultScale;
        self.clipHeight = self.jcropObject.tellScaled()["h"]/self.resultScale;
        self.previewCanvasPen.drawImage(self.img , self.startX , self.startY , self.clipWidth , self.clipHeight , 0 , 0 , self.previewBoxWidth , self.previewBoxHeight);
},

self.jcropObject.tellScaled()["x"] / self.jcropObject.tellScaled()["y"] ： 裁剪區(qū)域起點(diǎn)的X與Y坐標(biāo)

self.jcropObject.tellScaled()["w"] / self.clipHeight = self.jcropObject.tellScaled()["h"] ：裁剪區(qū)域的寬與高

且每一個(gè)數(shù)值后都要 /self.resultScale
這是因?yàn)槲覀儌鬟f給self.previewCanvasPen的self.img是未縮小的img（即未乘resultScale的img），而我們放入裁剪區(qū)的圖片是縮小后的，所以要得到相應(yīng)的位置和長(zhǎng)寬需要 /self.resultScale
然后再將所求數(shù)值傳給drawImage()
右圖為原圖，如標(biāo)注所示，選擇框區(qū)域同理

然后渲染到canvas上就ok啦

1.無(wú)法過(guò)濾圖片太大的情況
2.調(diào)整圖片大小不知是否過(guò)于繁瑣
3.居中方式需要改進(jìn)
4.暫時(shí)沒(méi)想到

若有不足，望有指教