将界面生成图片 canvas

最新推荐文章于 2022-05-07 11:45:31 发布

qq_41563226

最新推荐文章于 2022-05-07 11:45:31 发布

阅读量118

点赞数 1

http://caibaojian.com/html2canvas.html (参考链接)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>html2canvas example</title>
    <script type="text/javascript" src="html2canvas.js"></script>
</head>
<script type="text/javascript">
function takeScreenshot() {
  console.log('test');
    html2canvas(document.getElementById('view'), {
        onrendered: function(canvas) {
            document.body.appendChild(canvas);
        },
      // width: 300,
      // height: 300
    });
}
</script>
<body>
    <div id="view" style="background:url(test.jpg) 50%; width: 700px; height: 500px;">
        <input type="button" value="截图" onclick="takeScreenshot()">
    </div>
</body>

</html>