Repeating images can quickly crash browsers

[n8v]

First, @MrRio I would like to thank you for developing jsPDF. Continually amazing, the things JS is doing! Thank you!

I'm doing a repeating a high-resolution image in my PDFs, and I quickly hit a limit. With the Octonyan image I can cause today's Chrome (Version 26.0.1410.64 m) to totally crash with "Aw, Snap!" by cranking up the number of repeated images. The crash starts for me around 40 octonyans.

// ... assuming the beginning of the octonyan addImage example
doc.text(35, 25, "Octonyan loves jsPDF");

for (var i=0; i<8; i++) {
    for (var j=0; j<6; j++) {
         doc.addImage(imgData, 'JPEG', 15+i*20, 40+j*20, 18, 18);
    }
}

I think it is in the blob handling code but it's a little hard to get at since it crashes the tab so thoroughly.

I'm going to try working around my issue by making smaller JPGs.

[n8v]

Hmm, Firefox seems to handle a lot more images with grace. Safari gets really really slow but doesn't crash. Looks like this is really a Chrome issue, sorry!

[MrRio]

If you need to add the same image multiple times, for example a header/footer, then we could make an optimisation which adds the object only once and reference it instead of duplicating it. I'll need to have a play but I'm pretty sure this is possible.

[n8v]

I was wondering about that, and thinking it must be supported by the PDF format. It would make a big difference in the rendered PDF blob size too.

To keep the API as simple and beautiful as it is, what if you internally built a hash of "attachments"? Something like the first call

doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);  

internally sets attachments[md5sum(imgData)] = imgData and puts the equivalent of <img src=attachments[md5sum(imgData)]> into the PDF, then the second call with identical image,

doc.addImage(imgData, 'JPEG', 15, 400, 180, 180);      

since attachments[md5sum(imgData)] already exists, just does another <img src=attachments[md5sum(imgData)]>...

[MrRio]

md5sum would be very expensive in JS, but yeah, there must be a way of
quickly telling they're the same. :)

On Wed, May 22, 2013 at 10:51 PM, Nathan Vonnahme
notifications@github.comwrote:

I was wondering about that, and thinking it must be supported by the PDF
format. It would make a big difference in the rendered PDF blob size too.

To keep the API as simple and beautiful as it is, what if you internally
built a hash of "attachments"? Something like the first call

doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);

internally sets attachments[md5sum(imgData)] = imgData and puts the
equivalent of into the PDF, then
the second call with identical image,

doc.addImage(imgData, 'JPEG', 15, 400, 180, 180);

since attachments[md5sum(imgData)] already exists, just does another ...

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/99#issuecomment-18310392
.

James Hall
Director

snapshot media

+44 113 322 6477
http://snapshotmedia.co.uk

Registered office: The Old Brewery, High Court, Leeds, LS2 7ES
Registered in England no. 07430032
VAT No. 101 3405 84

[n8v]

Oh and also, I duplicated it today with Chrome 27, and I filed a Chrome bug report last week. I worked around my issue (which is needed imminently) by using a lower-res 150 dpi image. Also, the issue is exacerbated by only supporting JPEG. For print purposes I could use a much smaller data image for RLE encoded low color TIFF or something.

If you don't hash with md5sum or equivalent you'll need to accept a separate "key" argument to addImage, but maybe that's not so bad. Maybe

doc.addImage(imgData, 'JPEG', 15, 40, 180, 180, 'Octonyan');
doc.addImage(imgData, 'JPEG', 15, 400, 180, 180, 'Octonyan');

or even

doc.addImage(imgData, 'JPEG', 15, 40, 180, 180, 'Octonyan');
doc.addImage('Octonyan', 'JPEG', 15, 400, 180, 180);

or

doc.attachImage('Octonyan', imgData, 'JPEG');
doc.addImage('Octonyan', 15, 40, 180, 180);
doc.addImage('Octonyan', 15, 400, 180, 180);

I wish I were more able to dive in and contribute to this, but maybe I can help just by less vaguely imagining how it could be done :)