pc端，将页面内容生成为一张图片，并下载图片功能

最新推荐文章于 2023-11-17 12:25:08 发布

dxj124

最新推荐文章于 2023-11-17 12:25:08 发布

阅读量586

点赞数

分类专栏：功能组件

本文链接：https://blog.csdn.net/dxj124/article/details/103050727

版权

功能组件专栏收录该内容

22 篇文章 0 订阅

订阅专栏

将页面的html部分，生成为一张图片，点击下载的时候，下载这张图片到本地电脑

html2canvas.js——HTML转Canvas工具

1.下载html2canvas.js：https://html2canvas.hertzen.com/

github参考：https://github.com/niklasvh/html2canvas

1.引入文件：
<script src="jquery-1.9.0.min.js"></script>
<script src="html2canvas.js"></script>

2.html:
<body>
    <button>讲文本内容生成一张图片，下载保存</button>
    <div style="width: 400px;height: 400px;" id="saveBox">
        <p> 我是一段用来生成图片的文本</p>
        <p> 我是一段用来生成图片的文本</p>
        <p> 我是一段用来生成图片的文本</p>
        <p> 我是一段用来生成图片的文本</p>
        <p> 我是一段用来生成图片的文本</p>
    </div>
    <img src="" alt="" id="saveImg">
    <a href="javascript:;" class="btn-save" title="保存图片">保存图片</a>
</body>

3.js逻辑代码

var createImg = '';
$("button").click(function() {
    html2canvas($("#saveBox")[0], {
        scale: 1,
        logging: false,
        useCORS: true
    }).then((canvas) => {
        createImg = canvas.toDataURL("image/jpeg", 1);
        $('#saveImg').attr('src', createImg);
    });

    // 点击下载阵容图片
    $('.btn-save').on('click', function() {
        handlerDownload(base64ToBlob(createImg), 'my.jpg');
    });
})

// 处理下载
function handlerDownload(data, fileName, contentType = 'image/jpeg') {
    const blob = new Blob([data], {
        type: contentType
    })
    const downloadElement = document.createElement('a')
    const href = window.URL.createObjectURL(blob) // 创建下载的链接
    downloadElement.href = href
    downloadElement.download = fileName // 下载后文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() // 点击下载
    document.body.removeChild(downloadElement) // 下载完成移除元素
    window.URL.revokeObjectURL(href)
}
// base64转blob 
function base64ToBlob(code) {
    let parts = code.split(';base64,');
    let contentType = parts[0].split(':')[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;
    let uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {
        type: contentType
    });
}