html2canvas not working for large HTML content - jspdf

I am trying to use html2canvas library, to save html that's dynamically generated and output to the page as image. If the HTML generated isn't too much, then the html2canvas would work just fine, however, if the html generated is really too big (when I try to print it, it's 70 pages), then the html2canvas will return a canvas object where canvas.toDataURL('image/png') returns data:; and that's it.
I found a post online suggesting to change the maxInt in the html2canvas.js file to be Number.MAX_VALUE, but that didn't work as well.
Is there a way to workaround this issue? I will need this image to eventually pass it to jspdf library to generate a pdf document.

First things first. If you are getting clipping it could be because you are trying to capture an image that is too large for the browser. See the FAQ on limits of canvas sizes:
https://html2canvas.hertzen.com/faq
If that's the case then you'll need to break up the image into smaller sub-images and write those out as separate pages to your PDF. You can't combine them into a single image because the browser won't let you.
If you are under that size then it could be because of a defect that affects alpha.12 where capturing document.body can clip content if you are using passing the option windowWidth. The workaround to that defect is just to capture something other than document.body and it'll work.

Related

Does jsPDF allow for custom document sizes such as single labels?

I am trying to create pdf with a single label to print to a Brother PL-7 label printer.
I found jsPDF that is able to generate a PDF, however two problems.
I can't seem to specify the document to a custom size.
I am unsure of how to put the bar code I have in a canvas generated by jsBarcode into the PDF.
How can I create a single label size PDF document with a bar code included on it?
I had the same issue and found this fix on their github issues page in regards to the first problem:
https://github.com/MrRio/jsPDF/issues/372
worked for me perfectly once the that code was altered.
I know a lot less about how what exactly jsBarcode generates, but if it is generating a canvas file as you mentioned in your question, it can be converted into a png/jpeg and then be fed into jsPDF. See HTML5 canvas, convert canvas to PDF with jspdf.js.

What is the proper image size for an ePub cover page?

I am using the most excellent PHP library ePub to on-the-fly create digital books from HTML stored in my database.
As these are part of a collection, I am including a cover image for every book. Everything works fine in the code but depending upon the device/software interpreting the ePub, the image may get cut off. I have seen 600x800 pixels as a recommended size, but it still cuts it off (for example in Aldiko in Android). Is there a standard size that is recommended in the documentation?
Honestly, I would love a good and readable recommendation for documentation of the ePub format.
So, it seems that Aldiko has the problem, and not the other e-Readers I have tested (Calibre, Overdrive).
After trying various ratios, I found that Aldiko only respects the height:100% style I have called out in the height direction. It doesn't scale the image, only sets the height at 100% of the screen width. I am going to have to go with this being a bug in Aldiko, and keep the recommended 600x800 ratio for maximum resolution.
Another interesting thing I discovered as well; the Aldiko reader didn't recover as well from non-standard HTML. On one of the database entries, a <style> tag inside the <body> disappeared, but the style text did not. This is not the same for the other e-Readers.
The best general advice I found on the internet is Preparing Images for Ebooks Project (PIFEP).

iOS - How to add text on top of PDF Document?

I've loaded a PDF Document into a UIView Class, and displayed it on screen using CGDrawRect. So Now I can visually see the PDF: What I want to do is have the user click certain points of the file, which will bring up the key board, allowing the user to directly add text to the PDF, which will later need to be rendered - some direction or guide would be very helpful ?
I understand its a lot simpler to draw a PDF from scratch then to manipulate it
I also understand Quartz 2d may be the way to go, but a bit confused with the samples
There are two possible scenarios here:
Editing existing PDF text is very difficult, even with something like PSPDFKit. It is no accident that there are no PDF-based word processors.
Annotating PDF content is more straightforward:
Add any additional content as subviews to the UIView that contains the PDF document. Additional content can be in the form of text, vectors or images - anything that can be added to a UIView. At this point you do not need to worry whether the added content is "part of" the PDF.
When you want to render the added content to the PDF, simply render the container view (which contains both the original document and annotations) to a PDF Context using UIGraphicsBeginPDFContextToFile and UIGraphicsBeginPDFPage.
Check this question and answer for a simple example and a method for ensuring that the PDF is rendered as vectors, not as a bitmap: Rendering a UIView into a PDF as vectors on an iPad - Sometimes renders as bitmap, sometimes as vectors

What is the easiest way to create complex PDF in iOS?

I am trying to generate some complex invoice data in PDF format. I know two Technique:-
By converting Data into HTML data via UIWebView and generate its PDF accordingly. But it is having issue of showing data Blur or unreadable if Zoom, when data is long in size. Cause it actually first create Image from HTML data and generate pdf.
Using QuartzCore technique mentioned in Ray-Wenderlich tutorial:-
http://www.raywenderlich.com/6818/how-to-create-a-pdf-with-quartz-2d-in-ios-5-tutorial-part-2
Is there any way other then these above two? Also is it possible in the First technique to get data in UIWebView as vector based so that when it zoom it will not blur the data?
Thanks in Advance,
Vivek
Use the Quartz 2D framework as described in the tutorial. You don't want to create a pixel image from the html because it does not scale and can get large.
You can use a tableview with multi sections to create your invoice and convert it to an image(uiview----> image) and After that print that image to pdf (image--->pdf).

Programmatically rotate tiff image (or pdf)

Does anyone know a way of rotating an image (jpg or gif) in a TWebBrowser control (using Delphi)
Update
The file would be local.
Update 2
So I guess the question should be how do I rotate an image or pdf.
If you have control over the content return in the TWebBrowser it can be done via JavaScript.
Here is an example on JavaScript Image Rotation.
If you want to do it with a TImage there are several options listed in this Q/A.
I guess that you already use this approach to show the HTML content in your TWebBrowser.
Now, instead of JavaScript (as suggested by Robert), you use CSS in the generated HTML document.
I haven't tested this, but you should be able to rotate the image (and other HTML-elements) by using this CSS code (for IE-based browsers):
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
See details at MSDN
Well if it's on a website (in the TWebBrowser) then you can't rotate it. The best you can do is if the image is on your website you can use PHP/ASP/etc. to load the image, and produce a rotated version of it.

Resources