JS 将canvas画布保存到本地

时间：2018-12-10 22:01:03 阅读：496 评论：0 收藏：0 [点我收藏+]

标签：head rect idt lse pos stream function event and

<!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画布保存到本地

标签：head rect idt lse pos stream function event and

原文地址：https://www.cnblogs.com/huaspsw/p/10099146.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行