zoukankan      html  css  js  c++  java
  • html2canvas页面滚动内容截图并下载

    <!--div转成图片并下载-->
        <script src="./js/html2canvas.min.js"></script>
        <script>
            // edited from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill
            var dataURIToBlob =  function (imgName, dataURI, callback) {
                var binStr = atob(dataURI.split(',')[1]),
                                len = binStr.length,
                                arr = new Uint8Array(len);
    
                for (var i = 0; i < len; i++) {
                    arr[i] = binStr.charCodeAt(i);
                }
    
                callback(imgName, new Blob([arr]));
            }
    
            var callback = function (imgName, blob) {
                var triggerDownload = $("<a>").attr("href", URL.createObjectURL(blob)).attr("download", imgName).appendTo("body").on("click", function () {
                    if (navigator.msSaveBlob) {
                        return navigator.msSaveBlob(blob, imgName);
                    }
                });
                triggerDownload[0].click();
                triggerDownload.remove();
            };
    
            function createImg() {
                var getPixelRatio = function (context) { // 获取设备的PixelRatio
                    var backingStore = context.backingStorePixelRatio ||
                                    context.webkitBackingStorePixelRatio ||
                                    context.mozBackingStorePixelRatio ||
                                    context.msBackingStorePixelRatio ||
                                    context.oBackingStorePixelRatio ||
                                    context.backingStorePixelRatio || 0.5;
                    return (window.devicePixelRatio || 0.5) / backingStore;
                };
                //生成的图片名称
                var imgName = "cs.png";
                var shareContent = document.getElementsByTagName("body")[0];
                let scale = 3;
                var opts = {
                    //scale: scale,
                    /*canvas: canvas,
                     width,
                    height: height,*/
                    dpi: window.devicePixelRatio,
                    useCORS: true, // 【重要】开启跨域配置
                    // window.screen.availWidth,  //显示的canvas窗口的宽度
                    //height: window.screen.availHeight, //显示的canvas窗口的高度
                     window.document.body.offsetWidth,   //获取当前网页的宽度
                    height: window.document.body.offsetHeight, //获取当前网页的高度
                    windowWidth: document.body.scrollWidth,     //获取X方向滚动条内容
                    windowHeight: document.body.scrollHeight, //获取Y方向滚动条内容
                    x: 0,                                                                            //页面在水平方向没有滚动,故设置为0
                    y: window.pageYOffset                                            //页面在垂直方向的滚动距离
                };
                html2canvas(shareContent, opts).then(function (canvas) {
                    const context = canvas.getContext("2d");
    
                    // 【重要】关闭抗锯齿 https://segmentfault.com/a/1190000011478657
                    context.imageSmoothingEnabled = false;
                    context.webkitImageSmoothingEnabled = false;
                    context.msImageSmoothingEnabled = false;
                    context.imageSmoothingEnabled = false;
                    let imgUrl = canvas.toDataURL("image/png").replace("image/png","image/octet-stream");
                    //console.log("imgUrl",imgUrl);
                    dataURIToBlob(imgName, imgUrl, callback);
                });
            }
    
        </script>

    其实滚动不滚动无所谓,只要截图的元素不是视口元素,而是包裹滚动内容的元素,就可以截全了。

  • 相关阅读:
    超棒的前端开发界面套件 InK
    现代浏览器的web音频javascript类库 Howler.js
    富有创意的菱形响应式页面设计
    创意味儿十足的web布局及交互设计
    一个超酷的横向多列响应式布局效果
    帮助你生成响应式布局的CSS模板 xyCSS
    免费素材大荟萃:免费图标和UI设计
    使用浏览器生成超棒的midi音乐 midi.js
    JavaScript 和 .NET 中的 JavaScript Object Notation (JSON) 简介
    推荐一批基于web的开源html文本编辑器(40+)
  • 原文地址:https://www.cnblogs.com/macliu/p/14665615.html
Copyright © 2011-2022 走看看