html2canvans实现浏览器快速截图(这里有demo哦)-阿里云开发者社区

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

2022-04-29 173

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

<!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--) {
                        u8arr[n] = bstr.charCodeAt(n);
                    }
                    window.navigator.msSaveBlob(new Blob([u8arr], { type: mime }), "download.png");
                } else {
                    canvas.id = "mycanvas";
                    //生成base64图片数据
                    var dataUrl = canvas.toDataURL();
                    var newImg = document.createElement("img");
                    newImg.src = dataUrl;
                    var a = $("<a></a>").attr("href", dataUrl).attr("download", "img.png");
                    $("body").append(a); //火狐浏览器添加项
                    a[0].click();
                    a.remove();
                }
            }
        });
    });
    </script>
</body>
</html>

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景