摘要：表示的不一定是原生格式的數據。接口基于，繼承了的功能并將其擴展使其支持用戶系統上的文件。要從其他非對象和數據構造一個，請使用構造函數。要創建包含另一個數據的子集，請使用方法。要獲取用戶文件系統上的文件對應的對象，請參閱文檔。

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

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

本來感覺沒什么好寫的，還是寫一下作為第一個插件的留念吧
應該存在很多性能問題或細節問題，望有大神指教

demo如圖：

樣式就在CSS文件里修改啦

目錄

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

簡單介紹使用的庫——Jcrop（需要配合jQuery用）：Jcrop是一個jQuery圖像裁剪插件，通過設置參數與調用API滿足裁剪過程的需求，如：設置裁剪框的最大大小，裁剪時的幕布顏色等等，具體百度Jcrop吧

Blob與File， 的files，FileReader，canvas下的CanvasRenderingContext2D.drawImage()

1.Blob與File:
直接MDN解釋：
“Blob 對象表示一個不可變、原始數據的類文件對象。Blob 表示的不一定是JavaScript原生格式的數據。File 接口基于Blob，繼承了 blob 的功能并將其擴展使其支持用戶系統上的文件。
要從其他非blob對象和數據構造一個Blob，請使用 Blob() 構造函數。要創建包含另一個blob數據的子集blob，請使用 slice()方法。要獲取用戶文件系統上的文件對應的Blob對象，請參閱 File文檔。”
簡單地說：File可以取得系統里的文件，Blob不行

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

直接console.log看看吧

這是FileList

這是File

可是這樣我們并沒辦法直接獲取圖片，接下來就要用FileReader了

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

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

把這串數據插進 的src就可以顯示圖片了

FileReader的具體屬性與方法請大家看MDN吧

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

此方法我們用于渲染裁剪出來的圖片

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

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

這里我們根據應用需要我們用第三種參數格式，具體演示MDN已經說的很清楚啦

思路：

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

//圖像縮小
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;
                }

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

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

//要在圖片加載完后使用腳本
insert_jcrop : function () {
    var self =this;
    //設為對象
    self.jcropObject = $.Jcrop("#target",{    //調用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 , { 參數設置(用花括號括起來) } ) //具體參數大家就自行百度吧
"#target" : id被設為target的img，即能夠調用Jcrop的img
render()函數：寫在插件里的函數，用于渲染內容到canvas上，下面來介紹render函數

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"] ： 裁剪區域起點的X與Y坐標

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

且每一個數值后都要 /self.resultScale
這是因為我們傳遞給self.previewCanvasPen的self.img是未縮小的img（即未乘resultScale的img），而我們放入裁剪區的圖片是縮小后的，所以要得到相應的位置和長寬需要 /self.resultScale
然后再將所求數值傳給drawImage()
右圖為原圖，如標注所示，選擇框區域同理

然后渲染到canvas上就ok啦

1.無法過濾圖片太大的情況
2.調整圖片大小不知是否過于繁瑣
3.居中方式需要改進
4.暫時沒想到

若有不足，望有指教