getDataURL部分畫布對象

Question

我正在構建一個firefox插件，它允許用戶在對象上繪製任意圖形並將其保存爲圖像（png文件）。

var $ = getJQueryOb(); 
var canvas = '<canvas id="canvas" width="1024" height="1024" style="position:absolute; top:0px; left:0px;"></canvas>'; 
var currentWindow = Components.classes["@mozilla.org/appshell/window-mediator;1"].getService(Components.interfaces.nsIWindowMediator).getMostRecentWindow("navigator:browser"); 
var mainDoc = currentWindow.getBrowser().contentDocument; 
var cObj = $(canvas).appendTo(mainDoc.body); 
$(cObj).bind('mousemove', handlePenDraw); 

使用這個我可以畫在畫布上。但是，當我保存圖像時，我不希望保存完整的畫布 - 而只是創建要保存的圖像周圍的「邊框矩形」。

有沒有什麼辦法可以實現這一點。什麼我目前做的是要拯救畫布，因爲它是：

var $ = getJQueryOb(); 
var canvas = $('#canvas')[0]; 
var dURL = canvas.toDataURL("image/png"); 
saveToFile(dURL, "image-file.png"); 

Answer 1

你可以存儲所有已經在handlePenDraw方法被畫的左上方和右下方COORDS然後檢索已繪製的區域使用getImageData方法。

然後將您檢索到的imageData放到只與繪製區域一樣大的新畫布上，然後保存新畫布。

• 編輯：我現在已經創建了一個演示，做以上，但它不保存新的帆布，但只是其附加到一個div - http://jsfiddle.net/SMh3N/12/

下面是一些粗糙的未經測試的代碼：

// Set these with these in your handlePenDraw method. 
var topLeftPoint, bottomRightPoint; 
var width = bottomRightPoint.x - topLeftPoint.x; 
var height = bottomRightPoint.y - topLeftPoint.y; 

// Retrieve the area of canvas drawn on. 
var imageData = context.getImageData(topLeftPoint.x, topLeftPoint.y, width, height); 

// Create a new canvas and put the retrieve image data on it 
var newCanvas = document.createElement("canvas"); 
newCanvas.width = width; 
newCanvas.height = height; 

newCanvas.getContext("2d").putImageData(imageData, 0, 0); 

// Now call save to file with your new canvas 
var dURL = newCanvas.toDataURL("image/png"); 
saveToFile(dURL, "image-file.png");