Cattura solo una porzione di tela con .todataurl Javascript/HTML5

Question

Posso catturare una tela completa con .todataurl senza problemi. Ma non vedo o non so se c'è comunque l'acquisizione di una parte della tela e la salvo per l'immagine.

E.I. La sceneggiatura di Mr. Potatohead disegna cappelli, facce dei piedi delle mani ecc. Ecc. Mescolati su tutta la tela e puoi trascinarli sulla patata al centro della tela. Premi un pulsante per salvare l'immagine di patata patata guardando tutto spiffy in jpg per te. Senza tutti i cappelli extra/piedi/facce nell'immagine.

Mi sono rassegnato al fatto che questo è impossibile sulla base di tutto ciò che ho letto. Ma voi ragazzi avete dimostrato di essere più intelligenti di Google (o almeno di Google nelle mie mani) un paio di volte, quindi sto facendo un tentativo.

Spiacente nessun codice per pubblicare questa volta ... a meno che non si desidera che questo:

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

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

Ma questo è solo l'esempio di DataURL sto lavorando fuori di .. e funziona al di fuori del fatto doesnt cap solo il signor pat

Il mio fallback è quello di passare l'immagine a php e lavorare con esso lì per tagliare tutto quello che non voglio poi passarlo indietro.

EDIT

tmcw aveva un metodo per fare questo. Non sono sicuro se è il modo in cui dovrebbe essere fatto, ma funziona sicuramente.

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=""; 

crescere è un tag span vuoto, SecondaryCanvas è una var creato proprio per questo SecondaryCanvas_Context è l'getContext di SecondaryCanvas img creato solo per memorizzare il .toDataURL() della tela principale che contiene il signor Potatohead drawImage con offset negativi (-) per spostare l'immagine di MainCanvas in modo che venga visualizzata solo la parte che voglio. Quindi copri la nuova tela appena creata e apri una nuova finestra con il file .png

e se ricevi un errore dallo script dicendo che la sicurezza è errata 18 è perché hai dimenticato di rinominare imgTop in img con il resto di le variabili che si copiare incollato e cromo doesnt piace quando si tenta di salvare le immagini di contenuto locale del genere.

Answer 1

Creare un nuovo oggetto Canvas di una dimensione specifica, utilizzare drawImage per copiare una parte specifica della tela su un'area specifica della nuova e utilizzare toDataURL() sulla nuova area di disegno.

Answer 2

puoi lasciare a sinistra, in alto, larghezza e altezza parametri alla funzione toDataURL .. Qui è il codice per ottenere l'immagine dei dati a seconda dell'oggetto su tela.

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

Ecco un metodo che utilizza una tela fuori schermo:

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