png 24 and png 32 support added to addimage

[jamesbrobb]

Hi,

i've added png support to addimage. 24 and 32 bit at this point and i'm looking into 8. I've also added the ability to pass ArrayBuffer and ArrayBufferView/TypedArray to addimage, although i'm not sure if this is actually desirable?

I need to get together a list of my additions and the thinking behind them and also an example file. And it also needs a bit of refactoring/optimization. But i just thought i'd send this over now and get the ball rolling.

If there's anything that makes you think 'WTF is this guy on', i'm fairly new to JS, so bare with me...

[MrRio]

That's brilliant! Thanks for that. I'll have a look through it.

[jamesbrobb]

Nice one, no problem. I've now added an example html.

I've also added a new parameter to addImage - transparency. This is really just for use with DOM elements, as i'd set it to canvas.toDataURL(), instead of canvas.toDataURL('image/jpeg'), so that transparency was maintained for any element that had it, but there's a big difference in file size. As 'image/jpeg' it's coming out at 17kb, but with transparency ('image/png') it's 238kb. Unless there's an easy way to tell if a DOM element has transparency?

This is due to the way that transparency is dealt with in the pdf. You have to take the raw, uncompressed pixel bytes and separate them out into two TypedArray's of colour and alpha. These then get added as two separate images to the pdf, with the alpha also getting applied as a mask (or smask, as it's called).

I think it's also possible to re-compress those bytes using zlib or LZW compression, but i need to take a look at that. As otherwise it'll be quite a jump in file size if you have a lot of images.

[diegocr]

Awesome work without a doubt, congrats and thanks! :-)

However, if i could request something... is that such PNG support is made optional, I.e having to ship all these dependencies with our dist files will apparently turn them too bloated, IMHO.

[jamesbrobb]

Yeah definitely. I'm going to look at refactoring/optimization over the next few nights and will look at separating it out.

[jamesbrobb]

I've refactored addImage and separated out the png support. To add support for any new image format, all you need to do is add it's type to the 'supported_image_types' array at the top of the addImage plugin and then create a new plugin that implements a method with this signature,

jsPDFAPI.process[IMAGE TYPE] = function(data, index, alias, compress, dataAsBinaryString)

So to implement tiff support you'd have,

supported_image_types = ['jpeg', 'jpg', 'png', 'tiff'];

and a plugin with,

jsPDFAPI.processTIFF = function(data, index, alias, compress, dataAsBinaryString)

You can see this in action in jspdf.plugin.png_support.js

[jamesbrobb]

I've added zlib compression, but it's using zpipe at the moment as i've struggled to get it working with Deflate. I've also noticed an issue when adding multiple compressed images, as it doesn't look like zpipe is cleaning itself up properly... or it might just me.

Also indexed png's have moved a step closer, as the image is now displaying correctly, but i still need to sort out the transparency.

[jamesbrobb]

One last thing. At the moment if you pass in a jpeg as an ArrayBuffer, there's a dependency on jpg.js. This is overkill (was just there to get it working), as it parses the entire jpeg. I need to just look at abstracting out the part that gets the width and height from the buffer, as that's all we need.

Oh. And i've got rid of the 'transparency' param that i added and just use the format that's passed instead. It was only being used for DOM elements, so now if 'png' is specified as the format when a DOM element is passed to addImage as the imageData, it knows to keep the transparency.

[jamesbrobb]

Support's now added for all 5 png colour types. Recompression (using Deflate.js) and png filters have also been implemented and can be set at varying levels. And i've updated the example file so that the output of all different types can be tested.

[MrRio]

This is brilliant thanks. I will make separate issues to bring the dependencies down a bit

[jamesbrobb]

No problem, glad to help out.

A couple of things i forgot to mention. There's a small modification to png.js on line 142 - it's commented to explain why - so that specific version is needed to convert indexed png's. I've opened an issue on the authors repos, but looking at his response rate, i don't think it'll be updated any time soon.

The other thing is the dependency on ArrayBuffer and TypedArray to add a png. I briefly looked for a shim/polyfill, but nothing i found was suitable as they all have size restrictions on the the array that can be produced and due to language capabilities, aren't very efficient.

So currently on line 351 of jspdf.plugin.png_support.js there's an empty block where this should be handled. I was going to have a look at rewriting a version of png.js that handles binary strings instead, but due to a new work commitment, don't have time at the moment.

[sebastianperrone]

I'm was testing png ecoding with phonegap in android and result in a corrupt pdf. The text shown ok, but the images are corrupt. I test using directly the data string of each example image of this issue. In all cases (jpg too) the image was shown corrupted. The code I use was the following:

function createOrder() {
    console.log("create pdf object");
    pdf = new jsPDF("p", "mm", "a4")
    var imgData = "data:image/png;base64,iVBORw0..."; 
    //var imgData = "data:image/png;base64,iVBORw0KG...";
    //var imgData = "data:image/jpeg;base64,/9j/4AAQ...";
    //var imgData = "data:image/jpeg;base64,/9j/4AAQ...";
    pdf.addImage(imgData, "JPG", 14, 28, 44, 18); // or PNG for .png images
    printText(rows); // function which add text (this works fine)
    return pdf;
}

I try each one of the commented image data.
am I doing something wrong ? is there any solution for this problem ?