How to save the content of HTML5 Canvas as a picture with the help of toDataURL
This article is about how to save the content of HTML5 Canvas as a picture with the help of toDataURL, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.
The main idea is to use Canvas's own API-toDataURL () to implement, the whole implementation
The code for HTML + JavaScript is simple.
The code is as follows:
_ window.onload = function () {
Draw ()
Var saveButton = document.getElementById ("saveImageBtn")
BindButtonEvent (saveButton, "click", saveImageInfo)
Var dlButton = document.getElementById ("downloadImageBtn")
BindButtonEvent (dlButton, "click", saveAsLocalImage)
}
Function draw () {
Var canvas = document.getElementById ("thecanvas")
Var ctx = canvas.getContext ("2d")
Ctx.fillStyle = "rgba (125,46,138,0.5)"
Ctx.fillRect (25pr 25100100)
Ctx.fillStyle = "rgba (0146,38,0.5)"
Ctx.fillRect (58,74,125,100)
Ctx.fillStyle = "rgba (0,0,0,1)"; / / black color
Ctx.fillText ("Gloomyfish-Demo", 50,50)
}
Function bindButtonEvent (element, type, handler)
{
If (element.addEventListener) {
Element.addEventListener (type, handler, false)
} else {
Element.attachEvent ('on'+type, handler)
}
}
Function saveImageInfo ()
{
Var mycanvas = document.getElementById ("thecanvas")
Var image = mycanvas.toDataURL ("image/png")
Var w=window.open ('about:blank','image from canvas')
W. [XSS _ clean] ("
")
}
Function saveAsLocalImage () {
Var myCanvas = document.getElementById ("thecanvas")
/ / here is the most important part because if you dont replace you will get a DOM 18 exception.
/ / var image = myCanvas.toDataURL ("image/png") .replace ("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png")
Var image = myCanvas.toDataURL ("image/png") .replace ("image/png", "image/octet-stream")
_ window.location.href=image; / / it will save locally
}
Save Image
Download Image
The above is how to save the content of HTML5 Canvas as a picture with the help of toDataURL. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.
