search

blueimp / JavaScript-Load-Image

Load images provided as File or Blob objects or via URL. Retrieve an optionally scaled, cropped or rotated HTML img or canvas element. Use methods to parse image metadata to extract IPTC and Exif tags as well as embedded thumbnail images, to overwrite the Exif Orientation value and to restore the complete image header after resizing.
https://blueimp.github.io/JavaScript-Load-Image/
MIT License
4.46k stars 923 forks source link

Server side rendering broken with 2.29.0+ #106

Closed cberg-zalando closed 4 years ago

cberg-zalando commented 4 years ago

We use the library in a SPA using server side rendering. Due to the implementation of the fix for #97 in js/load-image-orientation.js, the library is broken in this case as the global document object is by default not available on the server.

blueimp commented 4 years ago

Thanks for the report @cberg-zalando.

Unfortunately this cannot be lazy loaded, as the check needs to run before any scale() call, which is synchronous.

I'm assuming you're doing isomorphic/universal rendering (including the same JS code on both client/server). In your use case, would the test code still run on client-side if I add a gating check for the document object?

cberg-zalando commented 4 years ago

Yep. It is a React based application and as we are using hydrate for the server side rendering, the created HTML is sent to the client and then the hooks, etc. are created. So I assume it also means that this part will also run in the browser.

blueimp commented 4 years ago

I've released blueimp-load-image@4.0.1. Please let me know if this resolves the issue.

cberg-zalando commented 4 years ago

Yep, its working. Thanks for the quick fix.

blueimp commented 4 years ago

Thanks for the confirmation. ☺️