<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>htmltopic</title>
<script type="text/javascript" src="./jquery-1.12.0.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html2canvas example</title>
</head>
<style>
#view{
display: inline-block;
width: 216px;
height: 466px;
background-image: url("./demo.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
font-size: 12px;
}
.title{
margin-top: 110px;
font-weight: bold;
font-size: 16px;
}.content{
font-size: 13px;
margin-top: 10px;
}
</style>
<script type="text/javascript">
function takeScreenshot() {
var biaoti = $('.biaoti').val();
var neirong = $('.neirong').val();
$('.title').html(biaoti);
$('.content').html(neirong);
$('#canvas').html("")
html2canvas(document.getElementById('view'), {
onrendered: function(canvas) {
$('#canvas').append(canvas);
var fullQuality = canvas.toDataURL("image/jpeg", 1);
var html= "<img src='"+fullQuality+"' style='width: 216px;height: 466px;'>";
$('#canvas').html("")
$('#canvas').append(html);
}
});
}
</script>
<body>
<div id="view" style="">
<p class="title">Coinbase本月底将关闭针对机构投资者的指数基金</p>
<p class="content">针对外界传言，Coinbase交易所今日发布声明，确认将在本月底关闭面向机构投资者的指数基金Coinbase Index Fund，相关客户将转向最近推出的Coinbase Buddle产品。</p>
</div>
<input type="button" value="截图" onclick="takeScreenshot()">
<br>
<input type="text" placeholder="标题" style="width: 450px" class="biaoti">
<br>
<input type="text" placeholder="内容" style="width: 450px;" class="neirong">
<div id="canvas"></div>
</body>
</html>
Heartless Wolf
1571624029
【web开发】
1260
收藏
