1

Using JavaScript-Load-Image function loadImage(...). But the base64 string is roughly 2-4x longer than loading it via FileReader().

I'm already dealing with large files so they cannot be so much larger.

var reader = new FileReader();
reader.onload = function() {
    console.log('initial length:', this.result.length);
};
reader.readAsDataURL(image_file);

vs.

loadImage(
        file,
        function (img) {
            console.log('resized length:', img.toDataURL().length);
        },
        {
            orientation: true
        }
    );

some results:

24839 vs. 107482

2498383 vs. 5898430

2391783 vs. 5955498

benwiz
  • 2,167
  • 3
  • 22
  • 33
  • Yes, base64 encoding increases the size. What's your question? – Heretic Monkey Jan 05 '17 at 17:34
  • They are both encoding in base64 and result in two very different sizes – benwiz Jan 05 '17 at 19:41
  • ... and your question is why are they different sizes? See, questions typically have a question mark. As for why they are different, from that page you linked to, the library performs some kind of transformation on the images. Note that you're also calling [`toDataUrl()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL), which seems to indicate `img` is a `canvas` element, which would also add some overhead, and the default image format is "image/png", which may differ from the original format... – Heretic Monkey Jan 05 '17 at 19:53
  • thanks looking into png – benwiz Jan 05 '17 at 20:09
  • 1
    that was it, forcing `toDataUrl('image/jpeg')` solved my filesize issue. – benwiz Jan 05 '17 at 20:17

1 Answers1

0

img.toDataURL() needed to be img.toDataURL('image/jpeg) to force saving as more compressed jpg instead of png

benwiz
  • 2,167
  • 3
  • 22
  • 33