您的位置：首页 > Web前端 > HTML5

将HTML5 Canvas的内容保存为图片

2016-07-05 17:48 721 查看

主要思想是借助Canvas自己的API - toDataURL()来实现，整个实现

HTML + JavaScript的代码很简单。

[html] view
plain copy

<html>

<meta http-equiv="X-UA-Compatible" content="chrome=1">

<head>

<script>

        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(25,25,100,100);

                ctx.fillStyle = "rgba( 0, 146, 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.document.write("<img src='"+image+"' alt='from canvas'/>");

            }



            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

            }

        </script>

</head>

<body bgcolor="#E6E6FA">

    <div>

        <canvas width=200 height=200 id="thecanvas"></canvas>

        <button id="saveImageBtn">Save Image</button>

        <button id="downloadImageBtn">Download Image</button>

    </div>

</body>

</html>

运行效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航