部分画布对象的 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 方法中，然后使用 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");