Capturing only part of a canvas using .todataurl Javascript / HTML5

Question

I can capture the full canvas with .todataurl without any problems. But I don’t see or don’t know if in any case there is capture of only part of the canvas and saving this image.

ei Mr. Potatohead script draws hats, arms, legs, etc. Etc. Mixed all over the canvas and you can drag them onto mr potatoes in the center of the canvas. Click the button to save the mr potato image that looks for you all spiffy to jpg. Without all the extra hats / legs / faces in the image.

I put up with the fact that this is impossible on the basis of everything that I read. But you guys turned out to be smarter than google (or at least google in my hands) several times, so I take a picture.

Sorry, there is no code to send this time ... if you do not want this:

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

But this is just an example of the dataurl I'm working on .. and it works beyond the fact that it doesn't close only mr potatoes

My refusal is to transfer the image to php and work with it there to cut out everything that I do not want and transfer it back.

EDIT

tmcw had a way to do this. Not sure if this is how it MUST be done, but it certainly works.

 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 is an empty span tag, SecondaryCanvas is var, created just for this SecondaryCanvas_Context is getcontext SecondaryCanvas img is only for storing .toDataURL () of the main canvas containing Mr. PotatoHead drawImage with negative (-) offsets to move the MainCanvas image like this so that only the part I want is displayed. Then close the new canvas that was just created and open a new window with .png

on, and if you got the error message “w370” with security error 18, because you forgot to rename imgTop to img with the rest of the variables that you copied, and chrome doesn't like it when you try to save local content images like this.

Answer 1

Create a new Canvas object of a certain size, use drawImage to copy a specific part of your canvas to a specific area of ​​the new one and use toDataURL () on the new canvas.

Answer 2

Here we use a method that uses a screen canvas:

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

Answer 3

You can specify the parameters on the left, top, width and height for the toDataURL function. Here is the code to get the image data depending on the object on the canvas.

 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});