Reduce PDF Document Size before Uploading in JavaScript?

Question

I am working on uploading a document (PDF) that mostly contains an image taken onsite from a Mobile Phone Camera, with help of the CamScanner(CS) app.

I could be able to handle the image file upload to reduce the size of the image, yet I could not be able to reduce the size of the PDF document before uploading.

As suggested by several sources, one method is to resize the image file, generate the PDF file with jspdf and start uploading the PDF file.

// Compress image and convert to pdf

function resizeBase64Img(base64, width, height) {
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    var context = canvas.getContext("2d");
    var deferred = $.Deferred();
    $("<img/>").attr("src", "data:image/gif;base64," + base64).on('load',function() {
        context.scale(width/this.width,  height/this.height);
        context.drawImage(this, 0, 0); 
        deferred.resolve($("<img/>").attr("src", canvas.toDataURL()));               
    });
    return deferred.promise();    
}

//select my image in base64
var imageStr64 = "/9j/4RiDRXhpZgAATU0AKgA...";
//resize image, add image and create the pdf
resizeBase64Img(imageStr64, 1000, 1000).then(function(newImg){
    var doc = new jsPDF();
    doc.addImage($(newImg).attr('src'), 15, 90, 180,180);
    doc.save('mypdf.pdf');
});

However, I want to clearly separate between uploading the image and uploading the PDF document but I could not find any open source library or answer except several online PDF compressors such as this one.

Is it Possible to doing that? Please kindly suggest and help me on that, thanks.

Note that `.load()` event listener shortcut is deprecated. Not sure what jQuery version you are using but `.on('load'` is preferred — charlietfl, Nov 29 '18 at 16:39
@charlietfl so is it possible or not to resize pdf file? I thought some kind like compressing and image inside pdf file same as we did on image file, is it possible and how can we do that ? Thanks — Houy Narun, Nov 29 '18 at 23:59
Hi! Did you find viable solution for this? I'm too looking for a way to optimize and compress pdf files client-side. — Clox, Aug 16 '21 at 11:35

score 1 · Accepted Answer · answered Nov 30 '18 at 02:02

1

There are certainly a number of open source CLI utilities you can use to compress PDFs, like this one written in Java: https://github.com/pts/pdfsizeopt. You can use WebAssembly and a Service Worker to get one of these CLI utilities to run natively in the client's browser as Google recently demonstrated with squoosh.app.

Here is the video in which they describe how to do this: https://www.youtube.com/watch?v=ipNW6lJHVEs

Or you can just upload the uncompressed PDF to your server and use an open source CLI utility to compress it on the server. I hope this helps!

answered Nov 30 '18 at 02:02

Neil VanLandingham

1,016
8
15

Thanks, I will have a try with it on my local PC, it's quite new to me for WebAssembly, however it seems hard to deploy on my users' machine. Would be much better if you could provide an javascript package or plugin of doing that, more importantly, I want to do this only client-side script before it is sending to server-side. Thanks. – Houy Narun Nov 30 '18 at 02:33
There are hundreds of npm packages that do the same thing with much less hassle. – Sadequs Haque Jan 23 '23 at 00:30

Reduce PDF Document Size before Uploading in JavaScript?

1 Answers1