一．需求
在canvas畫布上，假設我們繪制了一張圖片，現(xiàn)在需要將該圖片進行裁剪，并將裁剪的區(qū)域提取成圖像，并將該圖像轉(zhuǎn)化為base64格式返回，要求編寫這樣一個腳本。
二．知識儲備
HTML5畫布中，Canvas的以下幾個接口可能是我們所需要的：
1. clip：
該接口用于對當前的畫布設置裁剪區(qū)域，在之后的繪制過程中，只有裁剪區(qū)域中的繪制能夠生效，即能夠呈現(xiàn)。
該方法需要先繪制一個封閉的路徑，比如一個圓(arc)，抑或是一個矩形(rect)，接著在通過clip進行裁剪：
例：
cxt.rect(0, 0, 100, 100);
cxt.clip();
裁剪之后只能在裁剪區(qū)呈現(xiàn)繪制，如果想要去除clip的影響，則需要在clip裁剪動作之前先將畫布的狀態(tài)保存起來，比如：cxt.save()，當我們需要重新繪制時，便可以通過cxt.restore()恢復至clip之前的狀態(tài)，我們就可以在clip之前的狀態(tài)下進行繪制。不過需要提醒的是：雖然恢復了狀態(tài)，但是在restore之前和clip之后受到影響的繪制仍會保持原樣，具體可以自己測試以下。
2. drawImage：
該接口用于在canvas畫布中的特定位置將圖像、畫布或者視頻繪制在其上，其有三種語法：
語法1：通過設置圖像的左上角在畫布的位置(x, y)將圖像按圖像原本大小進行繪制
context.drawImage(img, x, y);
語法2：相較于語法1，此語法設置圖片在畫布上的寬高(圖像的拉伸縮小)
context.drawImage(img, x, y, width, height)
語法3：相比于語法2，添加了四個參數(shù)，sx、sy設置對圖像進行裁剪的區(qū)域左上角相對于圖像的位置，swidth、sheight設置裁剪寬高
context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height)
這里要注意的是，語法三中width和height是設定呈現(xiàn)于畫布中的裁剪區(qū)的寬高。
3. getImageData:
該接口復制畫布上指定矩形的像素數(shù)據(jù)，返回一個ImageData對象，該對象拷貝了畫布指定矩形的像素數(shù)據(jù)。
語法：
var imgData = context.getImageData(x, y, width, height);
x、y是指開始復制的區(qū)域的左上角x坐標和y坐標；
width、height是指將要復制的矩形區(qū)域的寬高；
4. putImageData：
該接口將圖像數(shù)據(jù)(從指定的ImageData對象)放回畫布上。
語法：
context.putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight);//后面四個參數(shù)是可選的
imgData: 要放回畫布的ImageData對象；
x、y: ImageData對象左上角的x、y坐標；
dirtyWidth, dirtyHeight：相當于裁剪寬度和高度；
dirtyX、 dirtyY：相對于裁剪區(qū)的偏移位置；
5. toDataURL:
該接口用于將整個canvas畫布圖像轉(zhuǎn)化為dataURL(base64)。
語法：
canvas.toDataURL(type, encoderOptions)
兩個參數(shù)均為可選，第一個參數(shù)指定圖片格式，第二個參數(shù)指定圖片的質(zhì)量，返回值為包含data URI的DOMString。
三．思路
根據(jù)上面的知識儲備，我們設計一下腳本邏輯：
首先設置裁剪區(qū)；
將圖片繪制在畫布的左上角；
通過getImageData獲取裁剪區(qū)的像素；
創(chuàng)建一個和裁剪區(qū)一樣大小的canvas；
通過putImageData將裁剪區(qū)像素復制到新創(chuàng)建的canvas畫布中；
通過新的canvas調(diào)用toDataURL獲取base64格式圖像；
四．編碼
//獲取canvas畫布相應區(qū)域的圖像信息，并返回其base64格式的圖像
function getBase64Image(context, x1, y1, x2, y2) {
var dataImg = context.getImageData(x1, y1, x2, y2);
var canvas2 = document.createElement("canvas");
var context2 = canvas2.getContext("2d");
var width = Math.abs(x1 - x2);
var height = Math.abs(y1 - y2);
canvas2.width = width;
canvas2.height = height;
context2.putImageData(dataImg, 0, 0, 0, 0, width, height);
var res = canvas2.toDataURL('image/jpeg');
return res;
}
