html转成png

最新推荐文章于 2025-05-25 09:53:08 发布

原创最新推荐文章于 2025-05-25 09:53:08 发布 · 869 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<div id="div">
    <p>Just have a <span style='color:white; text-shadow:0 0 2px blue;'>TRY</span></p><p><b>By Dion</b></p>
    <h1>hello world</h1>
</div>
<button onclick="begin()">下载</button>
<script src="htmlToPng.js"></script>
<script>
    var htmlToPng = new htmlToPng(html);
    var html = document.getElementById("div").innerHTML;
    function begin() {
        htmlToPng.change('zz')
    }
</script>
</body>
</html>

(function (global) {
    global.htmlToPng = function (str) {
        this.str = str;
    };
    global.htmlToPng.prototype = {
        change:function (filename) {
            var data = "data:image/svg+xml," +
                "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
                "<foreignObject width='100%' height='100%'>" +
                "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>" +
                this.str +
                "</div>" +
                "</foreignObject>" +
                "</svg>" ;
            var img = new Image();
            img.src = data;
            img.onload = function (ev) {
                // canvas
                var canvas = document.createElement('canvas');  //准备空画布

                canvas.width = img.width;
                canvas.height = img.height;

                var context = canvas.getContext('2d');  //取得画布的2d绘图上下文
                context.drawImage(img, 0, 0);

                var canvasData = canvas.toDataURL("image/png");
                var img2 = document.createElement('img');
                img2.onload = function (ev2) {
                    var a = document.createElement("a");
                    a.download = filename + ".png";
                    a.href = img2.getAttribute('src');
                    a.click();
                };
                // Make pngImg's source the canvas data.
                img2.setAttribute('src', canvasData);
            }
        }
    }
}(this));

还存在一个问题，样式写在外面的，这里是获取不到的，接着改进，还有这样使用函数也存在问题。