html2canvas 相关问题

html2canvas是一个JavaScript HTML呈现库，可让您根据DOM获取网页的“屏幕截图”。

HTML 使用 html2canvas 进行图片

我正在尝试使用 html2canvas 将 HTML 转换为图片。问题是阿拉伯字符没有正确转换！ ...

javascript php html canvas html2canvas

回答 3 投票 0

错误报告：我正在使用 bootstrap 4 和 Angular 11，尽管这个问题似乎与包直接相关，而不是与其中任何一个相关，但我已经尝试过：将 css 文本对齐更改为左、右和

javascript css angular bootstrap-4 html2canvas

回答 1 投票 0

如何使用html2Canvas自动下载截图

我有一个显示图形的画布，我正在尝试使用 html2canvas() 和以下代码来截取画布的屏幕截图：我有一个显示图形的画布，我正在尝试使用 html2canvas() 和以下代码来截取画布的屏幕截图： <div class="chartContainer" id="chart1"></div> <div id="displayCanvas" style="display:none;" class="stx-dialog"></div> html2canvas($('#chart1'),{onrendered:function(canvas1) {$('#displayCanvas').append(canvas1)}}); 这里，当加载图表容器时，它使用 id 为“displayCanvas”的 div 并附加画布的屏幕截图。如何下载所显示画布的屏幕截图？我已经尝试过使用如下所示的方法来下载图像： var link = document.createElement('a'); link.download = stx.chart.symbol+".png"; link.href = stx.chart.canvas.toDataURL("png"); link.click(); 但它只将画布上的数据下载为没有背景的图像（它不下载屏幕截图，只下载数据），下载后打开时显示黑屏，其中有数据。谁能帮助我如何直接下载从 html2Canvas() 截取的屏幕截图的图像？试试这个：在 HTML 中：给你想要截图的元素，ID为“capture”。提供您需要单击以获取屏幕截图的按钮/元素，ID 为“btn”。加载 html2canvas.min.js 文件。在 JavaScript 中：创建 capture() 函数。将 capture() 函数绑定到您正在使用的任何事件 - 在本例中，它位于 btn click 事件上。完成！当您点击 btn 时，观看奇迹发生。 HTML： <h1 id="capture">Hellooooo</h1> <button id="btn">Capture</button> <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> Javascript： function capture() { const captureElement = document.querySelector('#capture') // Select the element you want to capture. Select the <body> element to capture full page. html2canvas(captureElement) .then(canvas => { canvas.style.display = 'none' document.body.appendChild(canvas) return canvas }) .then(canvas => { const image = canvas.toDataURL('image/png') const a = document.createElement('a') a.setAttribute('download', 'my-image.png') a.setAttribute('href', image) a.click() canvas.remove() }) } const btn = document.querySelector('#btn') btn.addEventListener('click', capture) 这是 JSFiddle 💡快速提示：如果您想捕获整个文档/网页，只需将“捕获”ID 添加到 <body> 标签即可。如果图像有黑色背景，您的图表必须在屏幕上可见。因为html2canvas就像截图一样。如果你想转换数据到画布上，您必须确保数据出现在屏幕中。如果有人使用 React，您可以复制以下代码： async function download() { const canvas = await html2canvas(document.querySelector("#screenshot")); canvas.style.display = "none"; document.body.appendChild(canvas); const image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); const a = document.createElement("a"); a.setAttribute("download", `info.png`); a.setAttribute("href", image); a.click(); } <a href="#" onClick={() => download()}>Download</a> 这对我有用： HTML <div id="canvasDiv"> <canvas id="canvas" height="100" width="100"> Your browser does not support the HTML canvas tag. </canvas> </div> <button onclick="screenShot()" type="button">Take a screenshot</button> Javascript function screenShot(){ html2canvas(document.querySelector("#canvasDiv")).then(canvas => { var dataURL = canvas.toDataURL( "image/png" ); var data = atob( dataURL.substring( "data:image/png;base64,".length ) ), asArray = new Uint8Array(data.length); for( var i = 0, len = data.length; i < len; ++i ) { asArray[i] = data.charCodeAt(i); } var blob = new Blob( [ asArray.buffer ], {type: "image/png"} ); saveAs(blob, "photo.png"); }); } 我刚刚使用了html2canvas网站中提供的代码，然后我使用此代码下载了屏幕截图。 https://sebastianbaiju.github.io/canvas-screenshot/ https://github.com/SebastianBaiju/canvas-screenshot/blob/new-branch/README.md 请查看此网址了解更多详情

javascript html2canvas

回答 5 投票 0

CSS 过滤器属性在 html2canvas 中不起作用

我目前有一个带有图像的 div，要下载它，我使用以下代码： const handleDownloadAll = () => { const downloadPromises = [polaroidContainerRef.current].map( (

css reactjs image download html2canvas

回答 1 投票 0

如何使用 html2canvas 和正确的自定义字体将 D3 图表导出为 png？

我在 Vue 3 中用 D3.js 编写了几个图表组件，并且有一个单独的组件，它是一个使用 html2canvas 将单个图表导出为 PNG 的按钮。导出工作正常，但我...

vue.js d3.js html2canvas html-to-image

回答 1 投票 0

使用 html2canvas 截屏 MapBox 创建黑色 jpg

我设法在硬盘上保存了使用 html2canvas 通过 Google Maps API 生成的地图的屏幕截图。我现在尝试使用 MapBox API 做同样的事情，我在硬盘上得到的只是一个

javascript mapbox html2canvas

回答 3 投票 0

使用html2pdf.js生成PDF时内容被截断的问题

我正在开展一个项目，需要创建用户生成的简历的 PDF 版本。简历的内容是动态的，包括经历、教育和技能等部分，这些...

javascript reactjs jspdf html2canvas html2pdf

回答 1 投票 0

当用户打开新选项卡而不点击扩展图标时，是否可以调用 chrome.tabs.captureVisibleTab 来截图？

我正在构建一个chrome扩展，我想实现用户打开新选项卡时可以自动截图的功能。我想在不调用扩展的情况下实现它（通过单击

javascript google-chrome-extension screenshot html2canvas

回答 1 投票 0

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() 并且得到了像