html2canvas 相关问题

我正在尝试使用 html2canvas 将转换为图像。然而，有一个问题。图 1 中用红色圆圈标记的内的文本没有填充或任何类型的... 我正在尝试使用 html2canvas 将 <div> 转换为图像。然而，有一个问题。 <div>中用红色圆圈标记的Figure 1内的文本没有填充或任何类型的偏移引入参数。但当转换为图像时，文本上方会出现错误间隙，如Figure 2中的红色圆圈所示。我使用了 <h3>（以黑色背景标记）和 <span>（以绿色背景标记）。 Figure 1 Figure 2 为什么会这样？有办法解决这个问题吗？ Tailwind CSS 在预检期间将 display 标签的 img 属性设置为 display: block;。这会在元素下方引入一个在 UI 渲染中看不到的换行符。但是，当您使用 html2canvas 将相同的 HTML 转换为图像时，会渲染换行符，从而在结果图像中添加不必要的空格。为了解决这个问题，我们可以将以下代码添加到tailwind.css文件中。 @layer base { img { @apply inline-block; } } 上面的代码应该添加到@tailwind base;行之后。这为我解决了这个问题。这对我有用。 <style> body{ line-height: initial !important; } </style>

tailwind-css html2canvas

回答 2 投票 0

如何使用HTML2Canvas和jspdf添加图像后拆分页面

使用html2canvas和JsPDF将HTML转换为pdf并使用以下代码生成代码这段代码会将 div 的完整 HTML 转换为单个图像，并将显示在...

javascript angular jspdf html2canvas

回答 3 投票 0

类型错误：无法在“Blob”上执行“arrayBuffer”：非法调用 - 将 blob 插入数据库

我有这个 javascript 代码，它应该创建图像容器 div 的屏幕截图并将其发送到新的 php 脚本： html2canvas(图像容器).then(函数(画布){ 画布.toB...

javascript php ajax wordpress html2canvas

回答 1 投票 0

当在正确设置了 z-index 的浏览器上显示文本时，html2canvas 不会在 SVG 上渲染文本

我正在使用 html2canvas 来生成和保存海报。我目前有一个不透明度为 1 且 z-index:1 的自定义 SVG 对象。最重要的是，我有 MaterialUI 的 Typography 和正常的 ... 我正在使用 html2canvas 来生成和保存海报。我目前有一个不透明度为 1 且 z-index:1 的自定义 SVG 对象。最重要的是，我有 MaterialUI's Typography 和普通 <h1> 标签，z-index 设置为更高的值。当我下载图像时，但是文本没有出现。令人惊讶的是，当我将自定义 SVG 对象的不透明度设置为 0.5 时，我可以看到仍然存在的文本。我相信这可能是 z-index 没有正确应用的情况。请提供任何建议！代码块如下。海报 <Box sx={{ zIndex: 5, justifyContent: "flex-start", backgroundColor: "rgba(0, 0, 0, 0)", width: "90%", height: "35%", padding: "1rem", marginTop: "800px", overflow: "hidden", }} > <h1 > {donationDetails.startDate} </h1> <Typography color="white" variant="h1" gutterBottom sx = {{zIndex: 5000}} > {donationDetails.startDate} </Typography> <Typography color="white" variant="h2" gutterBottom > {donationDetails.name} </Typography> <Typography color="white" variant="h3" gutterBottom > {donationDetails.location} </Typography> <Typography color="white" variant="h3" gutterBottom > {donationDetails.donationItems} </Typography> </Box> <BasicOutline style={{ position: "absolute", zIndex: 1, }} /> 手柄下载代码 const handleDownload = () => { const box = document.getElementById('poster-box'); if (!box) return; html2canvas(box) .then(canvas => { const dataURL = canvas.toDataURL(); const link = document.createElement('a'); link.href = dataURL; link.download = 'poster.png'; link.click(); }); }; 通过在此链接此处添加position:relative解决了这个问题 <Box sx={{ justifyContent: "flex-start", backgroundColor: "rgba(0, 0, 0, 0)", width: "90%", height: "35%", padding: "1rem", marginTop: "800px", overflow: "hidden", zIndex: "5000", **position:"relative"** }} >

javascript svg z-index html2canvas

回答 1 投票 0

获取原图坐标

我需要用CSS自定义我的图像，我计划点2个点并根据图像的原始大小获取图像的坐标，并且我们只能在图像上点（注意：坐标不是基于

javascript image coordinates detection html2canvas

回答 1 投票 0

如何在React JS中使用html2canvas将react组件转换为图像？

朋友们大家好，我正在使用 React JS 中的图像比较器应用程序...我尝试在比较后下载图像，但不能。我的应用程序我的职能 import * as html2canvas from "html2canvas&quo...

reactjs screenshot html2canvas

回答 1 投票 0

jspf 和 html2canvas 生成只有 html 但没有数据的文档

当我下载 pdf 时，pdf 是空白的，除了点，但没有数据。我应该使用 html2canvas 吗？过去我尝试过 pdf.html().then() 并且得到了像