使用html2canvas对div元素进行拍照保存

木的感情259

已于 2023-12-26 14:53:42 修改

阅读量127

点赞数 1

文章标签： html5 前端 javascript html

于 2023-12-26 14:31:14 首次发布

本文链接：https://blog.csdn.net/weixin_63860651/article/details/135221172

版权

1. 首先引入html2canvas资源：

<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.js"></script>

2. 编写主体的架构

<div id="capture">
    <div class="beautiful-div">
        <p>这是一个需要拍照的div</p>
    </div>
</div>
<button onclick="downloadIamge()">拍照保存</button>

3. 编写js逻辑

function downloadIamge(){
        html2canvas(document.querySelector("#capture")).then(canvas => {
            // document.body.appendChild(canvas);
            var url = canvas.toDataURL('image/png');  // 使用 toDataURL 获取图片的 URL
            var a = document.createElement('a');
            a.href = url;
            a.download = "div.jpeg";  // '下载图片名称'
            a.click();  // 直接调用 click() 方法触发下载
        });
    }

总结：完整版代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拍照</title>
</head>
<style>
    .beautiful-div {
        width: 300px;
        height: 200px;
        background-color: #f2f2f2;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Arial, sans-serif;
        color: #333;
    }
</style>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.js"></script>

<div id="capture">
    <div class="beautiful-div">
        <p>这是一个需要拍照的div</p>
    </div>
</div>
<button onclick="downloadIamge()">拍照保存</button>

<script>
    function downloadIamge(){
        html2canvas(document.querySelector("#capture")).then(canvas => {
            // document.body.appendChild(canvas);
            var url = canvas.toDataURL('image/png');  // 使用 toDataURL 获取图片的 URL
            var a = document.createElement('a');
            a.href = url;
            a.download = "div.jpeg";  // '下载图片名称'
            a.click();  // 直接调用 click() 方法触发下载
        });
    }

</script>
</body>
</html>