Fixing addHTML crop math so PDFs are not blurry. Fixes issue #339

[bpmckee]

If you used addHTML with the pagesplit option enabled, you likely had blurry images / text. There were a couple issues happening.

1st, in the previous line 1863 var args = [canvas, x,cy?0:y,canvas.width/K,canvas.height/K, format,null,'SLOW'] it was passing a recently created canvas to addImage(). addImage can take either a canvas or an image. addHTML takes in an object that can be either as well. If it is an image, it calls the crop() method. If it is a canvas, it creates an image from the canvas an then calls crop(). Basically you're either going Image -> canvas -> Image, or canvas -> Image -> Canvas -> Image depending on what was passed into addHTML(). Having the canvas draw the image again was reducing the image quality slightly.

2nd, the math to crop the image was slightly off. Unless your browser width was just right, the image would either be squished or stretched. This made a significant "blurry image" look especially with text.

The code I modified now does not need the extra canvas -> image step to crop the image for each page. It also fixes the math so that the image is never squished or stretched.

The issue that I opened awhile ago is #339
Sorry it took me so long getting around to submitting a pull request :)

[bpmckee]

Oh! Also, if you want to test the new code, here's a plnkr I've been using to test stuff.

The "New Hotness" and "New Hotness 2" links were when I was playing around with blobs. They don't use addHTML, they were just temporary workarounds / testing math changes.

The "Old Busted" is the one that uses addHTML().

If you want to see what the "Old Busted" looked like before my changes, you can view that here.

[winklerj]

I'd like to see this pull request merged in. I'm having the same issue as described in #339 and this pull request will fix it. I've forked my own version at the moment.

[MrRio]

This looks good, there's also another branch you may be interested in.

#418

https://rawgit.com/Flamenco/jsPDF/master/examples/html2pdf/pdf2.html

This actually converts the Canvas commands into jsPDF commands. Which results in a non-blurry vector output.

[nicrizzo]

I noticed that addHTML is very slow on iOS 8.1.3 (at least using apache cordova) after applying this patch

[chip]

@MrRio - I'm running into issues as well with blurry output. I haven't reviewed the code here, but if you think it looks good I was just curious if you were waiting on #418 before merging this in? Thank you!

[MrRio]

#418 has been merged in now, so you should have much better HTML support.

[drizzt00s]

hi,
"If you used addHTML with the pagesplit option enabled, you likely had blurry images"
Is this problem now be resolved? if so , what is the codes or methods to fix this?

I used jsPDF and html2canvas . My problem is I have a quite long page that to be imported to a PDF, but if I use "pagesplit:true" , then the image and fonts are strenched and the quality is very low.

I searched for Internet and still don't know how to fix it.