addImage with compression repeats same image

So… This is pretty weird. I have a function that crops an image in different pieces and adds them to different pages of my pdf document. However, when I enable compression in the addimage function, the first image is repeated.

Code:

html2canvas(srcElWrapper, {
		background:'#fff',
		onrendered: function(canvas) {
			
			var image = new Image();
			image.src = canvas.toDataURL("image/jpeg");
			
			orient = 'p';
				
			// TEST
			l = {
				orientation: orient,
				unit: 'mm',
				format: 'a4',
				compress: true,
				fontSize: 8,
				lineHeight: 1,
				autoSize: false,
				printHeaders: true
			};
			
			var doc = new jsPDF(l);

			widthOfOnePiece = 992;
			heightOfOnePiece = 1403;
			
			numColsToCut = Math.ceil(canvas.width/widthOfOnePiece);
			numRowsToCut = Math.ceil(canvas.height/heightOfOnePiece);

			totalWidth = 0;
			totalHeight = 0;
				for(var x = 0; x < numColsToCut; x++) {
					for(var y = 0; y < numRowsToCut; y++) {
						var canvas = document.createElement('canvas');
						canvas.width = widthOfOnePiece;
						canvas.height = heightOfOnePiece;
						var context = canvas.getContext('2d');
						context.drawImage(image, x * widthOfOnePiece, y * heightOfOnePiece, widthOfOnePiece, heightOfOnePiece, 0, 0, canvas.width, canvas.height);
						
						// THIS OPENS RIGHT PART OF IMAGE:
						window.open(canvas.toDataURL());

						
						if ( x > 0 ) { doc.addPage(); }
						
						// THIS WORKS: doc.addImage(canvas.toDataURL(), 'jpg', 5, 15, 210, 297);
						
						// THIS DOESNT:
						doc.addImage(canvas.toDataURL(), 'jpg', 5, 15, 210, 297,'','FAST');
					}
				}
			
			doc.save('testsaves.pdf');
}

[sgelb]

This has little to do with compression. Have a look. Despite the compression option, what else did change?

doc.addImage(canvas.toDataURL(), 'jpg', 5, 15, 210, 297);
doc.addImage(canvas.toDataURL(), 'jpg', 5, 15, 210, 297,'','FAST');

You found it? Well, that empty string is setting an alias. The idea is that jsPDF reuses images with known aliases. So of course your first image is repeated again and again, you told jsPDF to do so.

There are basically three options:

1. Set alias to null or undefined.
2. Put all arguments in an object, omitting alias and pass this to addImage. It’s basically the same as option 1, but looks better to some.
3. Set an unique alias for each unique image. I would always do this: if no alias is set, jsPDF will calculate a hash instead, which can easily double or tripple the time it uses for adding an image.

[adong]

@sgelb You could also use the following to leverage compression without caching repeated images.

pdf.addImage(base64Image, 'png', x, y, width, height, NaN, 'FAST');

NaN is the key here 😃

https://github.com/MrRio/jsPDF/blob/d00a9dfde5fdf4f9f3c5f67a9231391975793c17/docs/modules_addimage.js.html#L339

You know, since NaN === NaN returns false