Tag: html2canvas
使用html2canvas将带有highcharts图形的html转换为图像
我想将HTML页面转换为图像，当我使用下面的代码时，我得到的结果与我期望的不完全匹配。 html2canvas($(“#sharedOne”), { onrendered: function (canvas) { console.log(“canvas”,canvas) var imgsrc = canvas.toDataURL(“image/png”); console.log(imgsrc); } }); 这是HTML的屏幕截图 这是运行上面代码的结果的屏幕截图。 当我使用下面的代码时，我收到一个错误： var canvas = document.getElementById(‘sharedOne’); console.log(“CSSSS”,canvas) var t = canvas.toDataURL(“image/png”); console.log(“chart”,t) 错误是： 错误canvas.toDataURL不是函数 我为此问题创建示例请检查 https://jsfiddle.net/solanki/hku6r7g2/ 注意： HTML页面包含高图图表
Html2canvas颜色变化和缩放
我在我设计的网页中添加了打印function。 我使用了html2canvas脚本。 然而，不知何故，页面的结构被改变了。 网页看起来像这样： 在谷歌浏览器中打开但是当点击打印按钮时，它会转到： 。 如果我在打印菜单中手动将缩放更改为50％，则所有页面都会进入页面，但颜色仍然是错误的。 function getScreenshot() { var printWindow = window.open(”, ‘PrintWindow’, ”); html2canvas(document.querySelector(‘#test’)).then(function (canvas) { var doc = printWindow.document; var img = doc.createElement(‘img’); img.src = canvas.toDataURL(‘image/png’); doc.body.appendChild(img); setTimeout(function () { printWindow.print(); printWindow.close(); }, 0); }); } document.getElementById(‘screenshot’).addEventListener(‘click’, getScreenshot); … 有没有办法解决这个问题？
html2canvas.js没有为动态生成的内容捕获图像
我使用vivagraphs生成动态svg元素但是当我单击捕获按钮时，没有显示任何节点和边缘。 这是脚本： $(document).ready(function() { //var testdiv = document.getElementById(“testdiv”); $(‘#btn’).click(function(){ html2canvas($(“#graph1”), { onrendered: function(canvas) { var myImage = canvas.toDataURL(“img/png”); window.open(myImage); } }); }); 当我检查元素时，svg在渲染图形后显示，但快照不包含节点和边缘。 有没有替代html2canvas或我可以解决这个问题？
html2canvas和toDataURL生成的图像有水平线
我循环遍历10-14个html元素，并在数组中生成图像数据，以便以后用于插入PDF。 问题是这些图像偶尔会有一条水平线，这似乎是html2canvas的一个现存问题。 主要发生在FF和IE中，而且发生在Chrome上，但不常见。 function convertElementsToImages(containerSelector) { if (_this.pdfDebug) { window.console.log(‘convertElementsToImages’); window.console.log(containerSelector); } var eles = $(containerSelector + ‘ > *’), q = $q.defer(), temp = []; //convert to canvas angular.forEach(eles, function(ele, eleKey) { convertElementToImage(ele).then(function(imageData) { temp[eleKey] = imageData; //last one, hopefully all previous elements have been resolved if (eles.length === eleKey + 1) { q.resolve(temp); […]
SVG Text属性加倍 – HTML2CANVAS
这是mycode和JSFiddle的链接。 HTML Inventory JS $(document).ready(function(){ $(‘#export’).on(‘click’, function() { html2canvas(document.body, { onrendered: function(canvas) { document.body.appendChild(canvas); }, }); }); }); 我正在尝试使用html2canvas库将svg转换为canvas图像。 在示例中，我只是将canvas图像附加到输出。 您可以清楚地看到文本成倍增加。 任何人都可以建议我解决这个问题。 希望我的问题很清楚。 提前致谢。
html2canvas输出选择div PHP
这段代码几乎可行 这会将整个页面输出为jpg 问题 ：我如何只抓取’#myDiv’的内容并将其输出为jpg文件？ JS： $(‘.myButton’).click(function(){ $(‘#myDiv’).html2canvas();//<< has no effect var queue = html2canvas.Parse(); var canvas = html2canvas.Renderer(queue,{elements:{length:0}}); var img = canvas.toDataURL(); img.replace(/^data:image\/(png|jpg);base64,/, ""); $.post( "postIO.php", {img:img}, function(data) { //$('#recieve').append(data); }); return false; }); postIO.php： $canvasImg = $_POST[‘img’]; //$canvasImg = str_replace(‘data:image/png;base64,’, ”, $canvasImg); $data = base64_decode($canvasImg); $File = “z.jpg”; $Handle = fopen($File, ‘w’); fwrite($Handle, $data); […]
如何在jquery中将html2canvas图像保存到系统文件夹中
我在这个表单中有一个id =“form1”的表单我有一个图表。现在我使用html2canvas来获取此form1的图像。这是我的代码.. $(document).ready(function () { $(‘#add_button’).click(function () { alert(“hiii”); $(‘form1’).html2canvas(); var queue = html2canvas.Parse(); var canvas = html2canvas.Renderer(queue, { elements: { length: 1} }); var img = canvas.toDataURL(); window.open(img); alert(“Hello”); }); }); Demo 所以我的问题是如何将此图像保存到我的系统硬盘中。请帮助我。
HTML2Canvas将2个捕获的canvas合并为一个
使用HTML2Canvas我正在尝试捕获googleMap（其工作正常）然后捕获超过它顶部的#overlay div（允许人们在特定位置将图像放在googleMap上） ）（工作良好）。 然后页面在页面上显示这两个canvas元素，然后我想再拍摄一次 ，将两个canvas组合成一个可以下载的单个图像。 到目前为止我遇到的问题是，当我尝试捕获我的#preview div时，似乎HTML2Canvas没有拾取它创建的canvas元素。 HTML： Download as PDF Start Editing HTML2Canvas JQuery： $(“.download”).click(function() { html2canvas($(“#map”), { logging: true, proxy: “https://html2canvas.appspot.com/query”, onrendered: function(canvas) { // var img = canvas.toDataURL(“image/png”); $(canvas).css({“position” : “absolute”, “z-index” : “999”}); document.getElementById(“preview”).appendChild(canvas); html2canvas($(“#overlay”), { logging: true, onrendered: function(canvas1) { // var img = canvas.toDataURL(“image/png”); $(canvas1).css({“position” : “absolute”, “z-index” : […]
html2canvas保存为jpeg而无需在浏览器中打开
我正在尝试创建一个screengrab按钮，用于创建用户document.body的图像。 理想情况下，用户可以选择将图像本地保存为.jpeg 。 我正在接近使用html2canvas库创建我需要的function。 function screenGrabber() { html2canvas([document.body], { logging: true, useCORS: true, onrendered: function (canvas) { img = canvas.toDataURL(“image/jpg”); console.log(img.length); console.log(img); window.location.href=img; // it will save locally } }); } 为了validation这是否正常，我一直在新的浏览器窗口中打开img变量。 图像没有完全渲染，我猜这是因为它的长度超过30,000个字符。 我怎样才能更好地为用户提供在onrendered事件后本地保存canvas的选项？
JSPDF – addHTML（）多个canvas页面
我注意到已经有一个版本“addHTML（）现在可以将canvas分成多个页面”，可以通过以下链接找到： https ： //github.com/MrRio/jsPDF/releases/tag/v1.0.138 。 我可以知道它是如何工作的吗？ 在我的情况下，我只是在点击“另存为pdf”按钮时尝试了它，它只渲染单个页面而不是多个页面（有时没有工作，我假设因为内容太长而无法生成为pdf） 。 如果这个案例有一些例子，我将不胜感激。 谢谢！ 附上我的代码如下： var pdf = new jsPDF(‘p’, ‘pt’, ‘a4’); pdf.addHTML($(“.pdf-wrapper”), function () { var string = pdf.output(‘datauristring’); pdf.save(“test.pdf”); });
