Question

我是新手。我只是想将一行文本转换为图像。

这是javascript

<!doctype html>
<html>
    <head>
        <title>Html to image</title>    
        <script type="text/javacript">
            $(function () {
                $("#show_img_btn").click(function () {
                    html2canvas("#the_text", {
                        onrendered: function (canvas) {
                            $("<img/>", {
                                id: "image",
                                src: canvas.toDataURL("image/png"),
                                width: '95%',
                                height: '95%'
                            }).appendTo($("#show_img_here").empty());
                        }
                    });
                });
            });
        }
        </script>

这是我希望转换为图像的代码行，并在点击按钮时显示图像

    </head>
    <body>
        <div id="the_text">Hey! Im a text! I will be converted to an image</div>
        </br>

        <button id="show_img_btn">Convert to Image</button>
        <div id="show_img_here"></div>
    <body>
</html>

Answer 1

＆＃13;

window.onload=function(){
  $("#show_img_btn").on("click", function () {
    var canvas = document.createElement("canvas");
    canvas.width = 620;
    canvas.height = 80;
    var ctx = canvas.getContext('2d');
    ctx.font = "30px Arial";
    var text = $("#the_text").text();
    ctx.fillText(text,10,50);
    var img = document.createElement("img");
    img.src=canvas.toDataURL();
    $("#show_img_here").append(img);
    //$("body").append(canvas);
  });
};

＆＃13;

canvas{
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
</head>
<body>
<div id="the_text">Hey! Im a text! I will be converted to an image</div>
<button id="show_img_btn">Convert to Image</button>
<div id="show_img_here"></div>
</body>

＆＃13;

Answer 2

您的问题不是很清楚，但我认为您正在寻找的方法是将文本绘制到画布上，然后您可以右键单击并保存图像。看一下这个：

将HTML文本转换为Image-Javascript

2 个答案: