＜div＞截图并且下载

原创已于 2023-10-08 11:00:59 修改 · 654 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #html5

于 2021-09-28 10:31:59 首次发布

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何通过引入base64.js, jQuery和html2canvas.js库，定义需要截取的页面元素，然后使用html2canvas将页面转换为canvas，最后将canvas内容转化为Base64格式并下载。重点在于展示如何实现将二维码背景区域保存为图片文件的操作。

1、下载 base64.js、jquery-1.11.3.min.js、html2canvas.js 文件

https://download.youkuaiyun.com/download/simplexiaobo/25522312?spm=1001.2014.3001.5503

2、引入上面的文件

<script type="text/javascript" src="__STATIC__/home/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="__STATIC__/home/js/html2canvas.js"></script>
<script type="text/javascript" src="__STATIC__/home/js/base64.js"></script>

3、定义需要截取的位置

<!-- 二维码背景区域 -->
<div class="code-box" id="test">
    <img src="home/static/invite-bg.png" class="bg" />
    <div class="user-info">
        <img src="" />
        <div>哈哈哈</div>
    </div>
    <div class="er-code">
        <img src="" />
    </div>
    <div class="invite-code">邀请码:11111</div>
    <div class="btn-box">
        <div class="btn" style="margin-right: 1.25rem;" id="down">保存到手机</div>
        <div class="btn">立即邀请</div>
    </div>
</div>

4、定义画布

<!-- 将页面转换为画布 -->
<canvas id="canvas" style="display: none;"></canvas>

5、定义一个隐藏下载按钮（直接href跳转不会直接下载）

<a id="btnDownload" class="hide"></a>

6、js方法实现

<script language="javascript">
    // 获取按钮id
    var btnSave = document.getElementById("down");

    // 获取内容id
    var content = document.getElementById("test");
    // 进行canvas生成
    btnSave.onclick = function(){
        html2canvas(content, {
            onrendered: function(canvas) {

                //添加属性
                canvas.setAttribute('id','thecanvas');
                //读取属性值
                //document.getElementById('canvas').innerHTML = '';
                document.getElementById('canvas').appendChild(canvas);

                // 将图片转成base64格式
                var img = canvas.toDataURL("image/jpeg", 1.0); // toDataUrl可以接收2个参数，参数一：图片类型，参数二： 图片质量0-1（不传默认为0.92）
                downBaseImg(img)
                // console.log(img)
                // document.getElementById('base64Img').setAttribute("src", canvas.toDataURL("image/jpeg", 1.0)) // 将base64格式图片显示到页面上
            }
        });
    };
    var btnDownload = document.getElementById("btnDownload");

    var MIME = {
        "application/x-zip-compressed": "zip",
        "application/javascript": "js",
        "text/css": "css",
        "text/plain": "txt",
        "text/html": "html",
        "text/xml": "xml",
        "image/png": "png",
        "image/jpeg": "jpeg",
        "image/gif": "gif",
        "image/svg+xml": "svg"
    };
    //文件名默认当前时间戳
    function downBaseImg(base, name = '下载') {
        var fname = name + "." + MIME[getContentType(base)];
        var blob = getBlob(base);

        if (navigator.msSaveBlob) {
            navigator.msSaveBlob(blob, fname);
        }
        else {
            btnDownload.download = fname;
            btnDownload.href = URL.createObjectURL(blob);
            btnDownload.click();
        }
    }
    /**
     * 获取Blob
     * @param {stirng} base64
     */
    function getBlob(base64) {
        return b64toBlob(getData(base64), getContentType(base64));
    }

    /**
     * 获取文件类型
     * @param {string} base64
     */
    function getContentType(base64) {
        return /data:([^;]*);/i.exec(base64)[1];
    }

    /**
     * 获取base64中的数据
     * @param {string} base64
     */
    function getData(base64) {
        return base64.substr(base64.indexOf("base64,") + 7, base64.length);
    }

    /**
     * base64转Blob
     * @param {string} b64Data
     * @param {string} contentType
     * @param {number} sliceSize
     */
    function b64toBlob(b64Data, contentType, sliceSize) {
        contentType = contentType || '';
        sliceSize = sliceSize || 512;

        var byteCharacters = atob(b64Data);
        var byteArrays = [];

        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);

            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }

            var byteArray = new Uint8Array(byteNumbers);

            byteArrays.push(byteArray);
        }

        var blob = new Blob(byteArrays, { type: contentType });
        return blob;
    }
</script>