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

2022-07-21 19:34:33 阅读：163 来源： 互联网

标签：content 截图 -- demo image html2canvans html2canvas var userAgent

<!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

标签：content,截图,--,demo,image,html2canvans,html2canvas,var,userAgent
来源： https://www.cnblogs.com/wangchuanxinshi/p/16503159.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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