在 JavaScript 中将 HTML 转换为图像

当前位置：主页 > 学无止境 > WEB前端 > HTML >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中将 HTML 转换为图像

作者：迹忆客最近更新：2023/03/27 浏览次数：

我们将在本文中学习将 HTML 呈现为图像。这意味着我们将对包含 HTML 的网页进行二维快照，并将其显示在网页上或下载图像。

我们使用外部 JavaScript 库在以下方法中将 HTML 呈现为图像。

使用 html2canvas JavaScript 库将 HTML 转换为图像

我们在下面的示例中使用了 html2canvas 库将 HTML 转换为图像并将其呈现在网页上。

例如，我们创建了两个具有不同 id 的 div 元素，my-div 和 ShowImage。我们将拍摄带有 my-div id 的 div 元素的快照，并在带有 id ShowImage 的 div 元素内显示快照。

此外，我们还创建了 <button> 元素并为其添加了 onclick 事件。当用户点击按钮时，它会调用 convertToImage() 函数，将 HTML 转换为图像。

<body>
    <div id="my-div">This is sample div element.</div>
    <div id="ShowImage"></div>
    <button onclick="convertToImage()">Convert</button>
</body>

我们在下面的 CSS 中对 div 元素应用了一些样式。我们已经使用 CSS 属性为 div 元素设置了高度、宽度和背景颜色。

此外，我们为所有 div 元素设置边距以在周围留出一些空间。

div {
    display: block;
    margin: 20px;
}
#my-div {
    height: 300px;
    width: 300px;
    background-color: red;
}

要使用 html2canvas 库，用户需要从 (https://html2canvas.hertzen.com/) 下载到本地计算机。之后，用户可以通过将库文件的正确路径分配给 <script> 标签的 src 属性，通过 <script> 标签将库添加到 HTML 代码中。

<script src="html2canvas.js" type="text/javascript"></script>

convertToImage() 函数包含将 HTML 转换为图像的 JavaScript 代码。

在下面的示例代码中，我们使用 JavaScript 中的 id 访问了 id 为 my-div 的 div 元素，并应用了 html2canvas 函数来捕获该特定 HTML 元素的图像。画布将存储图像，我们已将该图像附加到 ID 为 ShowImage 的 div 元素。

<script>
    function convertToImage() {
        html2canvas(document.getElementById("my-div")).then(function (canvas) {
        document.getElementById("ShowImage").appendChild(canvas);
        });
    }
</script>

输出结果如下：

把HTML转成图片

在上面的输出动画中，用户可以看到当我们点击转换按钮时，它会在文档主体中渲染 <div> 元素的新图像。

此外，我们可以创建 HTML 链接以在本地下载和保存捕获的图像。

在这里，我们使用 document.createElement("a") 创建了新的 a 元素，并将其存储在锚变量中。此外，我们使用 document.body.appendChild(anchor) 将 a 元素附加到文档主体。

接下来，我们使用 anchor.download = "sample.jpg" 为可下载的图像文件命名，并使用 canvas 变量的 toDataURL 属性设置锚点的 href 属性。此外，我们还为锚点的目标属性设置了 _blank 值，以使图像可下载。

输出还显示，当我们点击转换按钮时，它会将 div 元素的图像附加到网页，并将相同的图像文件下载到本地计算机。

<script>
    function convertToImage() {
        html2canvas(document.getElementById("my-div")).then(function (canvas) {
        var anchor = document.createElement("a");
        document.body.appendChild(anchor);
        document.getElementById("ShowImage").appendChild(canvas);
        anchor.download = "sample.jpg";
        anchor.href = canvas.toDataURL();
        anchor.target = "_blank";
        anchor.click();
       });
    }
</script>

输出结果如下:

把HTML转成图片 2

使用 dom-to-image JavaScript 库将 HTML 转换为图像

下面的 HTML 代码与上例中使用的代码几乎相同，其中包含两个具有不同 id 属性值的 div 元素。

<div id="my-div">Demo texts.</div>
<div id="ShowImage"></div>
<button onclick="convertToImage()">Convert to image</button>

下面的 CSS 代码包含 HTML 代码的样式，它与我们在上面的示例代码中使用的几乎相同。

div {
    display: block;
    margin: 20px;
}
#my-div {
    height: 100px;
    width: 100px;
    background-color: blue;
}

要使用 domtoimage 库，我们必须在本地下载它，或者我们可以使用它的 CDN。在这里，用户需要在 HTML 代码的 <head> 部分嵌入以下 domtoimage 库的 CDN。

<script
      src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"
      integrity="sha512-01CJ9/g7e8cUmY0DFTMcUw/ikS799FHiOA0eyHsUWfOetgbx/t6oV4otQ5zXKQyIrQGTHSmRVPIgrgLcZi/WMA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

在下面的 JavaScript 代码中，我们使用其 id 访问了 div 元素并将其存储在 element 变量中。

接下来，我们使用 domtoimage 库将 HTML 转换为 png 图像。我们使用 new Image() 构造函数创建了新的空图像并将其存储在 newImage 变量中。

此外，我们将 URL 值分配给 newImage 变量的 src 属性。之后，我们将 newImage 附加到网页。

此外，我们还使用了 catch 块来处理错误。

<script>
    function convertToImage(){
    var element = document.getElementById("my-div");
    domtoimage
        .toPng(element)
        .then(function (URL) {
            var newImg = new Image();
            newImg.src = URL;
            document.getElementById('ShowImage').appendChild(newImg);
        })
        .catch(function (error) {
            console.error("error");
        });
    }
</script>

输出结果如下:

把HTML转成图片 3

用户可以观察到我们正在对蓝色 div 进行快照；每当我们单击该按钮时，我们的代码都会将蓝色 div 的新快照附加到文档主体。

上一篇：HTML 图像的透明度

下一篇：从文件夹添加 HTML 图像

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享