迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > 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 的新快照附加到文档主体。

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

本文地址:

相关文章

HTML 中的 role 属性

发布时间:2023/05/06 浏览次数:124 分类:HTML

本篇文章介绍 HTML role属性。HTML中 role 属性介绍,role 属性定义描述语义的 HTML 元素的角色。

在 HTML 中打印时分页

发布时间:2023/05/06 浏览次数:188 分类:HTML

本篇文章介绍如何在打印 HTML 页面或内容时强制分页。将 page-break-after 属性设置为 always Inside @media print to Page Break in HTML

在 HTML 中显示基于 Cookie 的图像

发布时间:2023/05/06 浏览次数:154 分类:HTML

本文介绍如何根据 HTML 中的 cookies 显示图像。根据 HTML 中设置的 Cookies 显示图像。问题陈述是我们需要根据网页传递的cookie来显示特定的图像。

在 HTML 中创建下载链接

发布时间:2023/05/06 浏览次数:140 分类:HTML

本文介绍如何在 HTML 中创建下载链接。使用 download 属性在 HTML 中创建下载链接.。我们可以使用 HTML 锚元素内的下载属性来创建下载链接。

HTML 中的 ::before 选择器

发布时间:2023/05/06 浏览次数:70 分类:HTML

本教程介绍 CSS ::before 伪元素。CSS ::before 伪元素。 ::before 选择器是一个 CSS 伪元素,我们可以使用它在一个或多个选定元素之前插入内容。 它默认是内联的。

在 HTML 中创建一个可滚动的 Div

发布时间:2023/05/06 浏览次数:54 分类:HTML

本篇文章介绍如何使 HTML div 可滚动。本文将介绍在 HTML 中使 div 可滚动的方法。 我们将探索垂直和水平滚动,并通过示例查看它们的实现。

HTML 显示箭头的代码

发布时间:2023/05/06 浏览次数:153 分类:HTML

一篇关于用于显示箭头的 Unicode 字符实体的紧凑文章。本文讨论使用 Unicode 字符实体在我们的 HTML 页面上显示不同的字符。 HTML 中使用了许多实体,但我们将重点学习表示上、下、左、右的三角

在 HTML 中启用和禁用复选框

发布时间:2023/05/06 浏览次数:149 分类:HTML

本篇文章介绍如何启用和禁用 HTML 中的复选框。HTML 中的复选框 复选框是一个交互式框,可以切换以表示肯定或否定。 它广泛用于表单和对话框。

HTML 中的只读复选框

发布时间:2023/05/06 浏览次数:198 分类:HTML

本篇文章介绍了如何在 HTML 中制作只读复选框。本文是关于如何使 HTML 复选框控件成为只读组件的快速破解。 但是,首先,让我们简要介绍一下复选框控件。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便