Capturando solo una porción de canvas con .todataurl Javascript / HTML5

Puedo capturar un canvas completo con .todataurl sin ningún problema. Pero no veo ni sé si hay alguna forma de capturar solo una parte del canvas y savelo en la image.

El guión de Mr. Potatohead dibuja sombreros, manos, pies, etc. mezclados en todo el canvas y puede arrastrarlos y soltarlos sobre la papa mr en el centro del canvas. Presiona un button para save la image de mr potato luciendo todo espectacular para jpg para ti. Sin todos los sombreros / pies / caras adicionales en la image.

Me he resignado al hecho de que esto es imposible en base a todo lo que he leído. Pero ustedes han demostrado ser más inteligentes que Google (o al less Google en mis manos) algunas veces, así que estoy tomando una foto.

Lo siento, no hay código para publicar esta vez … a less que desee esto:

var canvas = document.getElementById("mrp"); var dataUrl = canvas.toDataURL(); window.open(dataUrl, "toDataURL() image", "width=800, height=600"); 

Pero ese es solo el ejemplo de dataurl con el que estoy trabajando … y funciona fuera del hecho de que no limita solo la patata mr

Mi alternativa es pasar la image a php y trabajar allí para cortar todo lo que no quiero y luego volver a pasarlo.

EDITAR

tmcw tenía un método para hacer esto. No estoy seguro si es la forma en que DEBERÍA hacerse, pero ciertamente funciona.

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

grow es una label de span vacía, SecondaryCanvas es una var creada solo para este SecondaryCanvas_Context es el context de obtención de SecondaryCanvas img creado para almacenar el .toDataURL () del canvas principal que contiene el Mr. PotatoHead drawImage con compensaciones negativas (-) para mover la image de MainCanvas para que solo se muestre la porción que quiero. Luego tapa el nuevo canvas que se acaba de crear y abre una nueva window con el .png

y si obtiene un error del script que dice "security err 18" es porque olvidó cambiar el nombre de imgTop a img con el rest de las variables que copió pegadas y a Chrome no le gusta cuando intenta save imágenes de contenido local como esa.

Cree un nuevo object Canvas de un tamaño específico, use drawImage para copyr una parte específica de su canvas en un área específica de la nueva, y use toDataURL () en el nuevo canvas.

Este es un método que utiliza un canvas fuera de la pantalla:

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

puede dar los parameters izquierdo, alto, ancho y alto a la function toDataURL. Aquí está el código para get la image de datos dependiendo del object en el canvas.

 mainObj = "your desinetworking 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});