html2canvans实现浏览器快速截图(这里有demo哦)

马克社区

发布于 2022-07-18 12:10:52

4270

发布于 2022-07-18 12:10:52

文章被收录于专栏：高端IT

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html2canvas</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/bluebird/latest/bluebird.js"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta3/html2canvas.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.js"></script> -->
    <!-- <script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script> -->
    <style>
    *{
        margin: 0;
        padding: 0
    }
    #content{
        width: 90%;
        margin: 0 auto;
        height: 300px;
        text-align: center;
        line-height: 300px;
        border:1px solid #333;
        box-sizing: border-box;
    }
    a {
        cursor: pointer;
        color: #333;
        text-decoration: underline;
    }
    </style>
</head>

<body>
    <div id="content" >
        <h1>hello html2canvas!</h1>
    </div>
    <script>
    $("#content").on("click", function(event) {
        event.preventDefault();
        var userAgent = navigator.userAgent;
        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
        html2canvas($('#content'), {
            allowTaint: true,
            taintTest: false,
            useCORS: true, //火狐浏览器添加项
            onrendered: function(canvas) {

                var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                var userAgent = navigator.userAgent;
                //判断是否是IE11
                debugger
                if (-1 !== userAgent.indexOf("Trident")) {
                    var arr = image.split(',');
                    var mime = arr[0].match(/:(.*?);/)[1];
                    var bstr = atob(arr[1]);
                    var n = bstr.length;
                    var u8arr = new Uint8Array(n);
                    while (n--) {

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/120055934

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html