html2canvas

html2canvas not rendering image (externally hosted images)

由 十年热恋 提交于 2021-02-19 01:46:49
问题 I have created a game in which users pick 4 images from 4 separate slideshows to create a composite image, which I then want to be able to export to a 'gallery' function on my site. I am attempting to use html2canvas but am encountering some problems this is my jquery: var shotit = function() { $('.bodyWrap').html2canvas({ onrendered : function(canvas) { var img = canvas.toDataURL(); $('<img>',{src:img}).appendTo($('body')); } }); } body wrap is a really long html element with lots of child

Html2canvas for each div export to pdf separately

由 时光毁灭记忆、已成空白 提交于 2021-02-19 00:44:51
问题 I have Page, It has 6 div with same class name "exportpdf", I am converting those div into pdf using jspdf and html2canvas var elementTobePrinted = angular.element(attrs.selector), iframeBody = elementTobePrinted.contents().find('div.exportpdf'); In html2canvas..... html2canvas(elementTobePrinted, { onrendered: function (canvas) { var doc = new jsPDF(); for(var i=1;i<elementTobePrinted.length;i++){ doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg', 15, 40, 180, 160); doc.addImage(canvas

How do I get a multi-page pdf from a website using jsPDF and HTML2Canvas?

由 早过忘川 提交于 2021-02-18 09:58:11
问题 I have a script that uses HTML2Canvas to take a screenshot of a div within the page, and then converts it to a pdf using jsPDF. The problem is the pdf that is generated is only one page, and the screenshot requires more than one page in some instances. For example the screenshot is larger than 8.5x11. The width is fine, but I need it to create more than one page to fit the entire screenshot. Here is my script: var pdf = new jsPDF('portrait', 'pt', 'letter'); $('.export').click(function() {

How to increase the resolution of the image while converting from canvas.todataURL

由 ぃ、小莉子 提交于 2021-02-10 13:25:10
问题 The image is captured from a DIV using HTML2CANVAS, but the image quality is very poor and it pixalets. The captured image resolution is 96 dpi, how to increase the resolution ? Is there any way to get a good quality image with high resolution, please help me out. My Code : <div style="border-style: solid; height: 15cm; width: 15cm; border-radius:25px; position: relative; top: 1px;" id="DIV1"> var element = $("#DIV1"); html2canvas(element, { useCORS: true, onrendered: function (canvas) { var

html2canvas and flashcanvas on IE8 not working

由 不羁岁月 提交于 2021-02-08 19:46:15
问题 I use html2canvas library to make a png image of a table. It works on Chrome, Firefox and Safari. The code is as follows: $('#myTable').html2canvas ({ onrendered : function(canvas) { var img = canvas.toDataURL('image/png'); var newWin = window.open('', '_blank','width=500,height=400'); var htmlPage = ""; htmlPage += "<html>"; htmlPage += "<head>"; ... htmlPage += "</head>"; htmlPage += "<body>"; ... htmlPage += "<img src='"+img+"' width='400px'/>"; ... htmlPage += "</body>"; htmlPage += "<

Take screenshot of <body> with html2canvas and store img as JS var

由 萝らか妹 提交于 2021-02-07 13:26:53
问题 I am attempting to let users on my site push a button to take a screenshot of the current screen ( everything in body). From my research, html2canvas seems to be a resource that makes this possible. My issue is the documentation does not provide example code and I am struggling to get a grip on the steps involved. http://html2canvas.hertzen.com/documentation.html The following SO question ( How to upload a screenshot using html2canvas? ) leaves me a bit confused. I just want to know how to

Take screenshot of <body> with html2canvas and store img as JS var

由 那年仲夏 提交于 2021-02-07 13:25:10
问题 I am attempting to let users on my site push a button to take a screenshot of the current screen ( everything in body). From my research, html2canvas seems to be a resource that makes this possible. My issue is the documentation does not provide example code and I am struggling to get a grip on the steps involved. http://html2canvas.hertzen.com/documentation.html The following SO question ( How to upload a screenshot using html2canvas? ) leaves me a bit confused. I just want to know how to

JsPDF Multiple page data is getting cropped

由 跟風遠走 提交于 2021-01-29 21:10:47
问题 The code that I have used for creating PDF s given below and my requirement is to make the PDF content not select (it should be like a Image) , that I have achieved. Now my problem is when the content in PDF is more it will generate in second page but there is no padding in bottom and header part. I have tried various options like autoTableHtmlToJson and many but of no positive result . html2canvas($('#mydiv')[0]).then(canvas => { try { contentH = $('#mydiv').height(); var img = canvas

html2canvas z-index not effect

由 为君一笑 提交于 2021-01-29 02:41:43
问题 I am using html2canvas library for converting a div to png. I have an issue about z-index . As you can see on image, I have boxes. Inside a box I have a div for background coloring ( z-index: 0 ), its growing with height value and a div for number ( z-index: 1 ). It works fine on browser as usual but when I try to take image, it seems like z-index doesn't work. normal on browser: issue on image version: Any help, I will be grateful. 回答1: I got the same issue. And I found out that html2canvas

HtmlToCanvas crops svg

由 帅比萌擦擦* 提交于 2021-01-28 22:00:19
问题 Trying to achieve whats done here. Only problem my downloaded pdf has image croped brutally by right: I dive into and catch html2canvas method cause the issue not jspdf, So how can I force change svg to png properly using html2canvas component: import PrintButton from "../../../components/print/print"; function QrcodeComponent(props) { return ( <> <div id={"barcodeCont"}> <QRCode level="L" style={{ width: 256 }} value={JSON.stringify({})} /> </div> <PrintButton id="barcodeCont" /> </> ); }
订阅 html2canvas