canvas - getDataURL 获取 Canvas 对象的一部分

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

使用它我可以在 Canvas 上绘图。但是，当我保存图像时，我不希望保存整个 Canvas - 而只是保存创建的图像周围的“边界矩形”。

有什么办法可以实现这个目标吗？我当前正在做的是将 Canvas 按原样保存:

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

Answer 1

您可以在handlePenDraw方法中存储已绘制的左上角和右下角坐标，然后使用getImageData方法检索已绘制的区域。

然后将您检索到的图像数据放到一个新 Canvas 上，该 Canvas 仅与绘制的区域一样大，然后保存新 Canvas 。

• 编辑:我现在创建了一个执行上述操作的演示，只不过它不保存新 Canvas ，而只是将其附加到 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");