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

简介: 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>


相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
5月前
|
Web App开发
在 HTML 中禁用 Chrome 浏览器的 Google 翻译功能
在 html 标签中添加 translate=“no” 属性,浏览器将不会翻译整个页面。
284 0
|
4月前
|
Web App开发
在HTML中用meta控制浏览器默认模式
在HTML文档的`&lt;head&gt;`标签中,通过添加不同的`&lt;meta&gt;`标签可指定浏览器默认使用的内核。使用`&lt;meta name=&quot;renderer&quot; content=&quot;webkit&quot;&gt;
54 1
|
4月前
|
Web App开发 移动开发 JavaScript
基于VML与HTML5 Canva实现的跨浏览器饼图与折线图
基于VML与HTML5 Canva实现的跨浏览器饼图与折线图
32 5
|
15天前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
14 0
|
4月前
技术经验分享:360浏览器截图快捷键设置
技术经验分享:360浏览器截图快捷键设置
47 0
技术经验分享:360浏览器截图快捷键设置
|
3月前
|
JavaScript 前端开发 物联网
文本,Vue实现打印的方式,打印机的种类有多少,浏览器打印html,右键,2打印插件,3指令打印,vue-print-nb
文本,Vue实现打印的方式,打印机的种类有多少,浏览器打印html,右键,2打印插件,3指令打印,vue-print-nb
|
4月前
|
移动开发 前端开发 JavaScript
浏览器端图表渲染技术SVG, VML HTML Canvas
浏览器端图表渲染技术SVG, VML HTML Canvas
30 0
|
5月前
|
前端开发 JavaScript
浏览器通过构建DOM树来解析HTML代码
【4月更文挑战第30天】浏览器通过构建DOM树来解析HTML代码
54 1
|
5月前
|
移动开发 前端开发 JavaScript
前端vue3——html2canvas给网站截图生成宣传海报
前端vue3——html2canvas给网站截图生成宣传海报
197 0
|
5月前
|
搜索推荐 前端开发 UED
html页面实现自动适应手机浏览器(一行代码搞定)
html页面实现自动适应手机浏览器(一行代码搞定)
558 0

热门文章

最新文章