<!DOCTYPE html><html><head> ???<title></title></head><body> ???<script type="text/javascript"> ???????window.onload = function() { ???????????draw(); ???????????var dlButton = document. getElementById ("baocun"); ???????????bindButtonEvent (dlButton, "click", saveAsLocalImage); ???????}; ???????function draw() { ???????????var canvas = document. getElementById ("thecanvas") ; ???????????var ctx = canvas.getContext("2d") ; ???????????ctx.fi11Style = "red"; ???????????ctx.fillRect(20,20,100,100); ???????} ???????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.document.write("<img src=‘ "+image+"‘ alt=‘from canvas‘/>") ; ???????} ???????function saveAsLocalImage () { ???????????var myCanvas = document .getElementById ("thecanvas") ; ???????????var image = myCanvas. toDataURL ("image/png") . replace ("image/png", "image/ octet-stream"); ???????????window.location.href=image; ???????} ???</script> ???<div> ???????<canvas width="100" height="100" id="thecanvas"></canvas> ???????<button id="baocun" atyle= "position: absolute;top: 120px:left: 33"></button> ???</div></body></html>JS 将canvas画布保存到本地
原文地址：https://www.cnblogs.com/huaspsw/p/10099146.html