1. IT宝库
  2. 编程技术问答
  3. html2canvas
以下是关于 html2canvas 的编程技术问答
如何生成带有外部图片的html div的 "截图"？
我有一个带有外部图像的HTML DIV. (以下是一个示例，但是在实际情况下，我使用的是Amazon S3，因此在同一服务器上下载和存储图像不是一个选项)当前我正在使用 html2canvas 将DIV转换为图像.但是，外部图像总是被空白替换. 我用来捕获图像的代码: $(function() { $("#btnSave").click(function() { html2canvas($("#widget"), { onrendered: function(canvas) { theCanvas = canvas; document.body.appendChild(canvas); // Convert and download as image Canvas2Image.saveAsPNG
0 2023-05-30
编程技术问答社区
使用PHPMailer和html2pdf通过电子邮件发送PDF数据
我试图通过电子邮件发送PDF或PNG，但似乎无效.以下是我上次的thenslemt，我在这里阅读了每篇文章，没有什么可以看出的建议，有人可以帮忙吗? 我正在使用phpmailer，html2pdf和html2canvas，这两个都在单击时产生适当的文档，只需将它们发送到php mailer dos不起作用即可. 我收到无法打开的文件...以下是我的最后一次尝试... 使用file_get_contents方法，我获得了0个大小的数据. PDF尝试: var element = document.getElementById('printableArea'); // var opt = { // filename: 'nalog.pdf' // }; html2pdf().from(element).toPdf().output('datauristring').then(function (pdfAsString) { pdfcontent
0 2023-05-29
编程技术问答社区
截取iframe-html2canvas不工作的截图
我有以下iframe: 我只想捕获iframe内容的屏幕截图，我尝试了HTML2Canvas，但似乎不起作用.我尝试将iframe放置在Div中，但没有欢乐. 我已经看到了使用PHP实现这一目标的各种方法，但似乎没有清楚.任何人都可以脱光灯吗? 解决方案 它写在文档的限制部分中: http://html2canvas.hertzen .com/document.html#限制. 脚本没有渲染插件内容，例如flash或java 小程序.它也不会渲染iframe内容.
4 2023-05-29
编程技术问答社区
html2canvas保存图像不工作
我正在使用HTML2Canvas 0.4.0渲染屏幕截图，并希望将其保存为我的Web服务器上的图像. 为此，我写了以下功能: javascript function screenShot(id) { html2canvas(id, { proxy: "https://html2canvas.appspot.com/query", onrendered: function(canvas) { $('body').append(canvas); // This works perfect... var img = canvas.toDataURL("image/png"); var output = img.replace(/^data:image\/(png|jpg);base64,/, ""); var Parameters =
0 2023-05-28
编程技术问答社区
html2Canvas/jsPDF仅将视口中的数据转换为pdf？
我正在尝试使用 我已写下以下代码，将同意表格转换为PDF，然后在单独的屏幕中显示. let htmlGrid = document.getElementById('customContent'); const options = {background: "white", height: htmlGrid.clientHeight, width: htmlGrid.clientWidth}; html2canvas(htmlGrid, options).then((canvas) => { let doc = new jsPDF("p", "mm", "a4"); let imgData = canvas.toDataURL("image/PNG"); //Add image Canvas to PDF doc.addImage(imgData, 'PNG', 0, 0); let pdfData = doc.output('datauristring'); 但是，问题在
0 2023-05-22
编程技术问答社区
如何对包含视频和画布的div进行截图？
注意:这不是重复的，因为我没有找到与视频和画布的屏幕截图有关的任何问题，我尝试了html2canvas 我们有一个内部包含视频元素和画布的DIV.视频用于流媒体，画布是在该视频上绘制任何东西.现在，如果我进行DIV的屏幕截图，则必须包含视频框架和图形.我找不到任何方法.我尝试了HTML2Canvas，但它提供了仅画布的屏幕截图.以下是代码. html: Capture CSS: video { max-width: 100%; width: 320px; } canvas { position: absolute; background:
6 2023-05-22
编程技术问答社区
在ReactJs中把pdf附加到输入端
我正在制作一个React应用程序，我需要从特定Div生成PDF 当前场景: - >制作了一个具有可打印div的应用程序，在单击按钮上，生成并下载了PDF. 代码: Generate PDF Create a screenshot from this div, and make it as a PDF file. *Then do not download instead attach to contact us form as attachment. Contact Us printpdf函数: const printPDF
0 2023-05-22
编程技术问答社区
使用html2canvas，ReactJS元素不能正确转换为canvas？
我已经构建了一个模因生成器应用程序 - 我的应用程序image 我正在使用html2canvas将我的模因图像，顶部文本和底部文本转换为画布，然后我可以下载画布. 下载.js import html2canvas from "html2canvas"; const download = async (capturedData) => { console.log(capturedData); //example- this line of code gives below commented data in console /* world Hello
32 2023-05-22
编程技术问答社区
为什么同一页面的截图在html2canvas中不一样？
我有一个代码，该代码将DIV的屏幕截图并将画布发送到PHP代码，以使用JQuery Ajax存储在服务器中. 我注意到即使页面内容保持不变，屏幕截图也不相同. 这是上面的第一个屏幕截图，它正确地显示了所有DIV内容，而其他屏幕截图则是其他屏幕截图 请问有什么问题? 代码是 function capture(){ window.scrollTo(0, 0); var element = document.getElementById("report_card_page"); html2canvas(element).then(function (canvas) { var image = canvas.toDataURL("image/jpeg", 0.9); $.post("save-capture.php", {"image": image}, function(){ alert("completed
0 2023-05-22
编程技术问答社区
Html2Canvas ...谷歌地图无法渲染
我正在运行Apache服务器.我使用HTML2Canvas设置了一个简单的屏幕捕获设置.捕获功能正在渲染空白图像.我已经尝试了多种方法来使用此站点的相关文章配置JavaScript，但无济于事.该代码都可以正常工作和测试，因为我可以在"加载Google Maps API"之前捕获图像.谢谢，任何建议都将不胜感激. Tester
4 2023-05-22
编程技术问答社区
JSPDF html2Canvas不能在IOS浏览器上下载PDF文件
我正在从事一个创建HTML CSS Div的项目，并且我正在使用JSPDF和HTML2Canvas转换DIV并下载它，这在PC和Android上非常有效，但是在iOS浏览器中，它不起作用，并且下载按钮不做任何事情 JS代码 $('#print').click(function (e) { e.preventDefault(); let HTML_Width = $(".report").width(); let HTML_Height = $(".report").height(); let top_left_margin = 1; let PDF_Width = HTML_Width + (top_left_margin * 2); let PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2); let canvas_image_width = HTML_Width; let canvas_image_height
2 2023-05-22
编程技术问答社区
使用HTML2CANVAS将莫里斯图表保存为图片
我有一个DIV，其中我使用Morris和Flot图表，我使用HTML2Canvas保存DIV，该DIV仅保存仅保存FLOT图表，而Morris图表空间在图像中留为空白. JavaScript代码 - $('#DIV1').html2canvas({ onrendered: function (canvas) { $('#img_val').val(canvas.toDataURL("image/png")); } }); 请建议如何将莫里斯图表保存在同一图像中. 预先感谢 解决方案 使用画布绘制了动物图表，因此可以使用HTML2Canvas转换为图像.莫里斯图表是使用SVG而不是帆布绘制的. http://fabricjs.com/ ，然后使用HTML2Canvas将转换后的画布导出到图像.
0 2023-05-22
编程技术问答社区
使用Javascript进行屏幕捕捉，包括视频标签
我有一个具有HTML元素和视频标签的网页.我想仅使用JavaScript/jquery/第三方插件捕获页面的屏幕截图. 我尝试过 html2canvas ，可用于HTML元素.它不会捕获视频标签. 我尝试使用此代码来捕获视频标签的帆布代码: function drawImage() { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); var width = $('#video').outerWidth(); var height = $('#video').outerHeight(); canvas.width = width; canvas.height = height; var elemVideo = document.getElementById('video'); context.drawImage(elem
2 2023-05-22
编程技术问答社区
使用html2canvas打印页面
我正在使用html2canvas. 在网络上构建打印页面功能 function printthispage() { html2canvas($("#mydiv"), { onrendered: function (canvas) { var myImage = canvas.toDataURL("image/png"); var printWindow = window.open(myImage); printWindow.document.close(); printWindow.focus(); printWindow.print(); printWindow.close(); } }); } 但是，窗口立即打开并关闭.我已经尝试删除cl
20 2023-05-22
编程技术问答社区
用Javascript生成高质量的PDF(jspdf+html2canvas)
我一直在尝试通过单击页面上的一个按钮来转换和生成PDF，该按钮会自动生成并强制下载页面的PDF，并使用两个流行的插件 * JSPDF * html2canvas 到目前为止，一切正常，但是生成的PDF总是模糊的，不是高质量的 导入JS文件(JQUERY，HTML2CANVAS，JSPDF)之后.这是我的JavaScript代码 function CreatePDFfromHTML() { var HTML_Width = $(".html-content").width(); var HTML_Height = $(".html-content").height(); var top_left_margin = 15; var PDF_Width = HTML_Width + (top_left_margin * 2); var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
4 2023-05-22
编程技术问答社区
html2canvas无法渲染CDN图像
我正在尝试使用HTML2Canvas获取屏幕截图.它适用于文本，但不是在渲染CDN映像，如果我在服务器中托管图像很好，但是如果尝试从CDN链接到cdn链接的图像没有渲染. 我的代码是: index.php function capture() { $('#target').html2canvas({ onrendered: function (canvas) { var img = canvas.
6 2023-05-22
编程技术问答社区
HTML2Canvas创建多个div
我正在尝试使用JSPDF和HTML2Canvas创建PDF. 我有多个Divs插入PDF. 如果我尝试将所有Divs放入容器中并进行一次渲染，则仅将第一页的高度放入PDF中. 无法弄清楚如何渲染多个Divs并将其粘贴在同一PDF中，以便它可以按页面上的页面进行. javascript function genPDF() { html2canvas(document.getElementById("container"), { onrendered: function (canvas) { var img = canvas.toDataURL(); var doc = new jsPDF(); doc.addImage(img, 'PNG'); doc.addPage(); doc.save('test.p
20 2023-05-22
编程技术问答社区
Jspdf的addHTML pagesplit选项正在拉伸页面。
我已经尝试了Internet上的所有内容，这是我最后一次尝试寻找是否可能. 我正在处理的是一个漫长而动态的HTML，我必须将其转换为多页PDF.我曾尝试过Addhtml和Addimage方法，但没有得到所需的结果. addhtml:当我使用PagesPlit选项时，其拉伸所有页面.我也尝试给出宽度和高度的选择，但除了停止显示. Addimage:这仅在1页上显示图像，没有选项将图像在2页上拆分. 我要添加的另一件事是我的HTML也可以具有动态宽度和高度. 注意:我正在使用JSPDF和HTML2Canvas库 解决方案 检查此问题: https://github.com/mrrio/jspdf/issues/707 您应该能够通过修改比例因子来解决此问题. var pdf = new jsPDF('p', 'pt', 'letter'); pdf.internal.scaleFactor = 2.25; 欢呼，
4 2023-05-22
编程技术问答社区
是否可以对网页中的iframe进行截图？
我正在尝试在网页中拍摄iframe的屏幕截图. 在我的特殊情况下，iFrame包含了我客户商店之一的街景. 就我搜索和阅读而言，我没有找到任何解决方案. 我知道有JavaScript库，例如Html2Canvas和Canvas2Image，但是它们无法捕获iframe. 这些库与每个HTML元素都正确地工作，除了iFrame. 这是小提琴的javascript: $(function() { $("#btnSave").click(function() { html2canvas($("#widget"), { onrendered: function(canvas) { var context=canvas.getContext("2d"); // returns the 2d context object // Convert and d
0 2023-05-22
编程技术问答社区
用html2canvas对＜body＞进行截图，并将img存储为JS var
我试图让我的网站上的用户按下按钮以获取当前屏幕的屏幕截图(身体上的所有内容). 从我的研究中，HTML2Canvas似乎是一种使它成为可能的资源. 我的问题是文档没有提供示例代码，我正在努力掌握所涉及的步骤. 以下问题(如何使用html2canvas?)让我有些困惑.我只想知道如何获得图像. 从他的代码中. $(window).ready(function(){ ('body').html2canvas(); var canvasRecord = new html2canvas(document.body).canvas; //At this point does the .toDataURL method return a png? }); 在这一点上，我迷失了图像所在的位置，甚至是如何/何时创建图像.稍后将其发送到服务器. 任何信息.谢谢！ (HTML2Canvas甚至需要吗?) 解决方案 当您使用HTML2
0 2023-05-22
编程技术问答社区
热门专题
freeswitch api帮助文档 Ztree点击事件jqgrid 剑指offer算法面试题总结 font-family中文字体 没有ipv6怎么访问ipv6 net reflector 8.5激活码 iOS 网络请求5次只接受最后一次 Windows设置默认路由 java 配置在.yml文件中的常量用@value获取 C# 判断日期是否是节假日 seatunnel性能 cdh网站完全进不去 appium代码设置adb路径 adb 获取手机页面xml 卷积神经网络模型为什么要改进 ORBSLAM2 双目 EPNP MySQL括号内插值缺被替换 淘宝登录跳过手机验证码 linux xshell6上传文件乱码 通过flyway 自定义初始化多个数据库