canvas 截图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>截图</title>
    <style>

    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>

<body>
    <!-- <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
    </canvas> -->
    <div id="aa">
        sdfsdfsdfsdf
    </div>
    <div>
        <img src="" alt="" srcset="" id='img'>
    </div>
</body>
<script>
    $(function () {
        html2canvas(document.getElementById("aa"), {
            scale: 2,//缩放比例,默认为1
            allowTaint: false,//是否允许跨域图像污染画布
            useCORS: true,//是否尝试使用CORS从服务器加载图像
            width: '500',//画布的宽度
            height: '500',//画布的高度
            backgroundColor: '#39a',//画布的背景色,默认为透明
        }).then((canvas) => {
            //将canvas转为base64格式
            var imgUri = canvas.toDataURL("image/png");
            console.log(imgUri)
            document.getElementById("img").src = imgUri

        });
    })
</script>

</html>
posted @ 2020-08-31 16:10  酷酷的城池  阅读(203)  评论(0编辑  收藏  举报