I'm trying to export an HTML page to PDF with ABCpdf. The text converts OK but the charts are very blurry. I've tried increasing the font size and it helps very little. What could be the solution?
EDIT: I'm using the asp.net charts if that helps.
You'll need to output the charts at a higher DPI. Not sure if you can do this with abcpdf though.
I am assuming your chats are images? If so the reason for the blur is that the DPI on the HTML image is 72 DPI and the DPI of the rendered pdf is 300 DPI.
The only way I know round this is to have the images in the HTML a much higher resolution (300 DPI) then reduce the size with a set height and width on the page. When ABCPdf imports the image it will download the source and look much nicer.
Other answers are on the right track, but not quite there.
The browser "usually" displays things at 96 DPI. This depends on settings but we're pretty safe to assume here. The PDF is going to scale to 72 DPI. So you need your Rect to be set to 3/4 the browser width. Then your images will look correct.
As a side effect you may end up needing a higher resolution image in order to get the size you want (you can increase the resolution of an image by the inverse, i.e. by a factor of 4/3 to achieve parity with what you'd see in a browser).
Using the code below, your images will never blur (though you may need to adjust your expected document width; a PDF with a width of 612pt # 72 DPI (letter-sized portrait orientation, for example) needs to be backed by a browser width of 816px # 96 DPI):
const Double pdfDpi = 72;
const Double browserDpi = 96;
var browserToPdfDpiRatio = BrowserDpi / PdfDpi;
pdf.HtmlOptions.BrowserWidth = (Int32)Math.Round(pdf.Rect.Width * browserToPdfDpiRatio, 0);
Related
I am using Amcharts.js for graph generation but i had an issue "Downloaded images are blured only on windows and linux system but not on mac" and also commmunicate with amcharts support team but no response yet.
Please try set multiplier to 2. Take a look at this setting at https://github.com/amcharts/export.
this.toJPG({
multiplier: 2
}).function (data) {
// Export
});
Please check the updated example here: https://www.amcharts.com/kbase/exporting-multiple-charts-on-the-page-to-a-single-pdf/
What is multiplier?
Let's say your chart is 800 pixels wide and 400 pixels tall. If multiplier is 1, then the image might stretch to cover the display area in PDF. If the PDF is 1000px wide, that means the image is stretching therefore it looks blurry.
If you set multiplier to something bigger, like 2, then that image is created 1600px by 800px. That means it won't need to stretch unless if your PDF is being displayed with more than 1600px.
I built this site via Google Web Designer (ZippyDriver.com) and want it to scale to my viewport but haven't figured out how to do it. I don't want a responsive site — just want it to stretch to the screen if possible. Any ideas???
Have you tried to change all your elements size to % instead of px dimensions?
You can achieve this by selecting any of your elements, lets say an IMG, then in its Properties -> Size and Position be sure it shows the IMG dimensions in % not in px.
After that, try resizing the viewport and see if it works.
I'm trying to create a PDF document from images of varying sizes so that each page of the PDF displays one of the images unscaled, the page size should fit the image dimensions.
I'm using Prawn to generate the PDF from a list of image file names. To get the image dimensions I use FastImage.
Prawn::Document.generate('Output.pdf') do
list_of_image_filenames.each do |i|
image_size = FastImage.size(i)
start_new_page(:size => image_size, :layout => :portrait)
image(i)
end
end
To test it I'm using three PNG files of dimensions 560x560, 600x600, and 600x600. I've made sure that FastImage returns the correct image dimensions.
The resulting PDF (Preview tells me it's PDF version 1.4) looks like this:
It starts with 3 empty pages (one of which is probably due to the fact that I didn't put anything on the first page), then the first image, which is cropped. Except the first one, which I'm ignoring for now, these pages are of size 560x560 px, according to Preview.
Next are two empty pages, then the second image, which also doesn't fit on the page. These pages have dimensions 600x600 px.
Finally, two more blank pages and the third image, cropped again, page dimensions also 600x600 px.
Here is a sample of one of the cropped images; the original image is a complete rounded rectangle with the digit "1" inside.
Why do the images not fit on the page? How can I put the individual unscaled images on pages fitting their dimensions?
May not be an exact answer but Probably too long for a comment. I have a few suggestions:
Have you tried specifying image size and position? e.g.
image(i,position: :left, vposition: :top, fit: image_size)
This will place an image in the top left corner of the document an will force it to fit in dimensions of the image_size Array. This might help with the cropping.
Also when setting page_size you need to pad for margins otherwise the image will not fit because it is outside the writable area try something like
image_size = FastImage.size(i)
#default margins are 0.5 inches so pad both height and width with 1 inch using in2pt
page_size = image_size.map{|p| p + in2pt(1) }
start_new_page(:size => page_size, :layout => :portrait)
I cannot guarantee this will work and it has not been tested but usually overflow onto additional pages has to do with the fact that you cannot place a specific object inside the bounds so padding the page size should help.
https://github.com/boazsegev/combine_pdf
you could try this gem.
cropped_size = [X0, Y0, X_max, Y_max]
combine_pdf = CombinePDF.new(pdf_path)
combine_pdf.pages.each{|page| page.crop(cropped_size)}
combine_pdf.save(new_pdf_path)
We have a sprite of many icons which is 10564px x 80px. The icons are arranged horizontally.
In every other browser except IE10 the icons/images show up when being used as background images for tags with specific CSS to apply the relevant position.
When viewed in IE10 they do not show up at all and actually when you try to view the png file directly from the URL in IE10 it doesn't show either.
Any ideas?
After extensive testing, it turns out it's a limitation on the width of the PNG canvas and IE10.
PNG images would work and can be viewed right up until 8000px wide but no more than that, after that they just don't render.
After more testing it's related to whether or not they are transparent. PNGs with transparency just don't show at all whereas images without transparency show as a black block (canvas).
Whether or not MS will fix this remains to be seen... we live in hope!
The fix for us is to reduce the width of our sprite to 8000px and have two or more rows of icons/images well spaced out.
The fixes is only to separate the each individual image as single with minimum size, which will be less than 8000px wide;
I am making a responsive portfolio website using WordPress. I have a small issue that is breaking the layout. All images are meant to be 300px wide by 200px high.
I have also used the WordPress API to crop images if the user uploads images that are larger than the above mentioned dimensions
add_image_size( "portfolio", 300, 200, true );
What this does for me is that it inserts the width="300" and height="200" attributes to the images automatically (but the original dimensions of the image stay the same they are just being resized) This works well except when i try to resize my browser window..
Here is a senario: The client uploads an image with dimensions 300px wide and 210px high.. initially it is being resized and shown hence the layout is perfect but when i resize the browser the images gets resized as well but with respect to its "original dimensions".. hence the image with the original height of 210px is larger that the rest of the images.. and as i am floating all the images to form a 3 column layout the difference in height breaks the layout (shifting the column below this large image to the right and leaving an empty column below itself.)
How do i fix this issue? I thought of using timthumb to resize all images before they are display.. hence changing the original dimensions of the image on the fly but i think this is not an efficient way? Any other solution to this problem ? Also i dont want to using anything like jQuery Masonry as i have a specific layout to maintain.
Thanks
You can use the max-height rule from css to limit the height of all images equally.
eg:
.gallery img{
max-height: (some height);
}
Use % or em for the height, pixels might not work as well in a responsive design.