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");