2

私は、ユーザーがオブジェクトに任意の図形を描画し、それを画像（pngファイル）として保存できるようにするFirefoxプラグインを構築しています。

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

1 に答える 1

6

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");
于 2010-07-22T16:22:34.170 に答える