JS 将canvas画布保存到本地

时间：2021-08-21 13:02:59
<!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>

相关文章