A.B*_*Ban 2 html javascript canvas
我是新来的。我只是想将一行文本转换为图像。
这是 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>
这是我希望转换为图像并在单击按钮时在 div 中显示图像的代码行
</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>
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);
});
};canvas{
border: 1px solid red;
}<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>