getDataURL pour une partie de l'objet canvas

Question

Je construis un plugin firefox qui permet aux utilisateurs de dessiner n'importe quel personnage arbitraire sur un objet et de le sauvegarder en tant qu'image (fichier 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); 

En utilisant cela, je peux dessiner sur la toile. Cependant, lorsque je sauvegarde l'image, je ne veux pas que la totalité de la toile soit enregistrée, mais plutôt le "rectangle de délimitation" autour de l'image créée pour être sauvegardée.

Y a-t-il un moyen de le faire? Ce que je fais actuellement va sauver la toile comme il est:

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

Answer 1

Vous pouvez stocker les bons en haut à gauche et en bas coords qui ont été tirées dans votre méthode handlePenDraw puis récupérer la zone qui a été tiré sur en utilisant la méthode getImageData.

Ensuite, placez l'imageData que vous avez récupérée sur un nouveau canevas de la taille de la zone dessinée, puis enregistrez le nouveau canevas.

• EDIT: J'ai maintenant créé une démo qui fait ci-dessus, sauf qu'il ne sauve pas la nouvelle toile, mais juste à un joint div - http://jsfiddle.net/SMh3N/12/

Voici un code non testé rugueux :

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