Shulou(Shulou.com)06/03 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.