以下是无效的代码。基本上我允许用户编辑div中的一些文本,然后显示其截图。有人可以告诉它为什么不起作用?
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css" />
<title>Poster</title>
</head>
<body>
<div id="main_image">
<img src="image.jpg" id= "image"/>
<div id="user_text">IT IS TOTALLY AWESOME</div>
</div>
<div id="edit_text_box">
<textarea id="user_input" placeholder="Your text here.." rows="2" cols="30" ></textarea>
<div id="change_size">
<span style="float: left;">FONT-SIZE : </span>
<button id="decrease_size">-</button>
<button id="increase_size">+</button>
</div>
<input id="submit" type="submit" value="SUBMIT" />
</div>
<script type="text/javascript">
window.onload = function() {
html2canvas( [ document.body ], {
onrendered: function( canvas ) {
document.body.appendChild( canvas );
}
});
};
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/edit_text.js"></script>
</body>
</html>
答案 0 :(得分:5)
我改变了你的代码并且它有效:
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css" />
<title>Poster</title>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
var Submit = function() {
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
};
</script>
</head>
<body>
<div id="main_image">
<img src="image.jpg" id= "image"/>
<div id="user_text">IT IS TOTALLY AWESOME</div>
</div>
<div id="edit_text_box">
<textarea id="user_input" placeholder="Your text here.." rows="2" cols="30" ></textarea>
<div id="change_size">
<span style="float: left;">FONT-SIZE : </span>
<button id="decrease_size">-</button>
<button id="increase_size">+</button>
</div>
<button onclick="Submit();" >Submit</button>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/edit_text.js"></script>
</body>
</html>
首先,我添加了html2canvas JavaScript文件(<script type="text/javascript" src="html2canvas.js"></script>
)。您可以在https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js下载它,并将该文件放在与HTML相同的文件夹中。显然,您正在尝试创建类似表单的内容,但代码中没有form
标记。您可以在提交表单(然后必须添加<form>
)或使用onclick
的{{1}}属性时调用html2canvas。我将您的button
输入元素更改为submit
并将button
方法绑定到其Submit
属性。当用户单击该按钮时,屏幕截图将显示在表单下方。