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

àì夳堔傛蜴生んèń 2021-09-29 05:40 174阅读 0赞

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