html2canvas.js的初级使用Demo

直接上代码：

<!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 html2Image() {
        console.log('test');
        html2canvas(document.getElementById("view")).then(function (canvas) {
            console.log(canvas);
            var dataUrl = canvas.toDataURL();
            document.getElementById("html2Image").src = dataUrl;
        });
    }
</script>
<body>
<div id="view" style="background:url(test.jpg) 50%; width: 600px; height: 400px;">

</div>
<input type="button" value="截图" onclick="html2Image()"
       style="margin: 20px 0 0 20px;height: 50px;width: 100px;font-size: 2rem">


<div>
    <img id="html2Image" src="" alt="">
</div>
</body>

</html>

注意：#view的宽度不要设太大，不然会超出窗口报错；

代码效果：
html2canvas.js的初级使用Demo

该Demo只是简单的操作，一些优化或者特殊场景操作有空会持续学习；

是用到的js下载地址：html2canvas.js 1.0.0版本

html2canvas.js的初级使用Demo

html2canvas.js的初级使用Demo

相关推荐