How To Take Screenshot Of Canvas?
how to take screenshot of canvas? or How create image, which will consist of image + free zone , located on canvas?
Solution 1:
It depends on your framework but basically you can use canvas.toDataURL()
Here is a complete example
<!DOCTYPE HTML><html><head><style>body {
margin: 0px;
padding: 0px;
}
</style></head><body><canvasid="myCanvas"width="578"height="200"></canvas><script>var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = '#0000ff';
context.stroke();
// save canvas image as data url (png format by default)var dataURL = canvas.toDataURL();
</script></body></html>dataUrl will contains the image and you can save it wherever you want.
Solution 2:
It depends what you want to do, the easiest way is to use toDataUrl on your canvas.
canvas.toDataURL('png')
This will encode your canvas to base64, then you could use it in a download link like this
<ahref="%dataURI%"download>download</a>Or just stick it back into the dom in an image tag.
You can then write a controller which is more backend using what ever language to convert that base64 to an image file if you wanted to store an actual copy off the image.
See this post for more info
How to save a PNG image server-side, from a base64 data string
Post a Comment for "How To Take Screenshot Of Canvas?"