Erfassen nur einen Teil der Zeichenfläche mit .todaturl Javascript/HTML5

Question

Ich kann eine vollständige Leinwand mit .todaturll ohne ein Problem erfassen. Aber ich sehe oder weiß nicht, ob es sowieso nur einen Teil des Canvas zu erfassen und das zu Bild speichern.

e.i. Mr. Potatohead skript zeichnet Hüte, Hände, Füße, Gesichter usw. auf der ganzen Leinwand und Sie können sie per Drag & Drop auf die Mr. Potato in der Mitte der Leinwand ziehen. Drücken Sie eine Taste speichern Sie das Bild von Mr. Potato suchen Sie alle spiffy zu jpg für Sie. Ohne all die zusätzlichen Hüte/Füße/Gesichter im Bild.

Ich habe mich damit abgefunden, dass dies unmöglich ist, basierend auf allem, was ich gelesen habe. Aber ihr Leute habt bewiesen, dass sie schlauer sind als Google (oder zumindest google in meinen Händen) ein paar Mal, also mache ich eine Aufnahme.

Leider kein Code, um diese Zeit zu schreiben ... es sei denn, Sie wollen diese:

var canvas = document.getElementById("mrp"); 
var dataUrl = canvas.toDataURL(); 

window.open(dataUrl, "toDataURL() image", "width=800, height=600"); 

Aber das ist nur das Beispiel DataURL ich arbeite weg von .. und es funktioniert außerhalb der Tatsache, tut es kappe nur die mr kartoffel

Mein Fallback ist, das Bild zu php zu übergeben und mit ihm dort zu arbeiten, um alles auszuschneiden, das ich nicht will, dann führe es zurück.

EDIT

tmcw hatte eine Methode, dies zu tun. Nicht sicher, ob es so ist, wie es getan werden sollte, aber es funktioniert sicherlich.

document.getElementById('grow').innerHTML="<canvas id='dtemp' ></canvas>"; 
var SecondaryCanvas = document.getElementById("dtemp"); 
var SecondaryCanvas_Context = SecondaryCanvas.getContext ("2d"); 
SecondaryCanvas_Context.canvas.width = 600; 
SecondaryCanvas_Context.canvas.height = 600; 
var img = new Image(); 
img.src = MainCanvas.toDataURL('image/png'); 
SecondaryCanvas_Context.drawImage(img, -400, -300); 
var du = SecondaryCanvas.toDataURL(); 
window.open(du, "toDataURL() image", "width=600, height=600"); 
document.getElementById('grow').innerHTML=""; 

wachsen wird ein leerer span-Tag, ist SecondaryCanvas ein var gerade für diesen SecondaryCanvas_Context die getContext von SecondaryCanvas img gerade erstellt der .toDataURL() der großen Leinwand zu speichern, den Herren potato enthält drawImage mit negativen (-) Offsets, um das Bild von MainCanvas so zu verschieben, dass nur der Teil angezeigt wird, den ich sehen möchte. Schließen Sie dann die neue Leinwand, die gerade erstellt wurde, und öffnen Sie ein neues Fenster mit der .png

auf und wenn Sie eine Fehlermeldung aus dem Skript sagt Sicherheit irr 18 ist, weil Sie vergessen, umzubenennen imgTop zu img mit dem Rest von Die Variablen, die Sie kopieren und einfügen, gefällt Ihnen nicht, wenn Sie versuchen, lokale Inhaltsbilder so zu speichern.

Answer 1

Erstellen Sie ein neues Canvas-Objekt mit einer bestimmten Größe, verwenden Sie drawImage, um einen bestimmten Teil der Leinwand in einen bestimmten Bereich der neuen zu kopieren, und verwenden Sie toDataURL() auf der neuen Leinwand.

Answer 2

können Sie der Funktion toDataURL die Parameter left, top, width und Height geben. Hier ist der Code, um das Datenbild abhängig vom Objekt auf der Leinwand zu erhalten.

mainObj = "your desired Object"; // for example canvas._objects[0]; 

var image = canvas.toDataURL({ left: mainObj.left, top:mainObj.top, 
    width: mainObj.width*mainObj.scaleX, height: mainObj.height*mainObj.scaleY}); 

Answer 3

Hier ist eine Methode, die eine Off-Screen-Leinwand verwendet:

var canvas = document.createElement('canvas'); 
canvas.width = desiredWidth; 
canvas.height = desiredHeight; 
canvas.getContext('2d').drawImage(originalCanvas,x,y,w,h,0,0,desiredWidth, desiredHeight); 
result = canvas.toDataURL()