getDataURL для части объекта canvas - PullRequest
Новая
       27

getDataURL для части объекта canvas

2 голосов
/ 22 июля 2010

Я создаю плагин 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");

1 Ответ

6 голосов
/ 22 июля 2010

Вы можете сохранить верхнюю левую и нижнюю правую координаты, которые были нарисованы в вашем методе 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");
...