Jump to content
dalibor

Client-side image resize - EXIF and IPCT metadata loss

Recommended Posts

I'm using hook for retrieving data from image metadata (IPTC) after image upload and filling them to some fields. When I choose server-side image resize, everything works well. But when I use client-side resize (which si much faster and client comfortable  - it uses PWImageResizer.js) image metadata are lost during resizing - I have downloaded the file after resize and checked for EXIF, IPTC etc. and they are not present.  Using PW 3.0.165. Tried to look into PWImageResizer.js but uhh it's too javascreepy to me:) 

Share this post


Link to post
Share on other sites

Interesting question, I've had a look at PWImageResizer.js, apparently this wasn't built with retention of EXIF data in mind. Take a look at the source code of the scaleImage function: It uses a canvas to draw the image on it, then resizes it according to the maximum width/height settings (including some fancy math to scale the image). The canvas is then turned into a data URI using HTMLCanvasElement.toDataURL() and which is then parsed back to a Blob (binary image data). The intermediary canvas can't hold EXIF metadata, so it is lost during that step. If you wanted to retain EXIF data, the script would need to read it from the original image and add it back to the final Blob / binary data. This SO thread has some examples of how to do that. Not sure if you can add it to the image inputfield from outside, it would probably need to be added to the core. Maybe open a feature request for that, though you should be aware that this is not trivial if the script needs to handle all kinds of edge-cases and support legacy browsers ...

  • Like 2

Share this post


Link to post
Share on other sites
8 hours ago, dalibor said:

When I choose server-side image resize, everything works well. But when I use client-side resize (which si much faster and client comfortable  - it uses PWImageResizer.js) image metadata are lost during resizing

Both client-side and server-side resizing strip the EXIF data. If you are able to get the EXIF data with the server-side option then possibly you are hooking before the resize and might be able to access and save the EXIF data then. But in my opinion PW shouldn't be stripping any data from an uploaded image that is to be the "original" from which variations are derived.

There's an open issue about this, with fixes for both client-side and server-side resizing (ImageMagick only): https://github.com/processwire/processwire-issues/issues/1055
Just hoping and waiting for it to be applied to the core...

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By psy
      I've searched, and maybe missed, the solution. I have a 'normal' images field and uploading images with a file size greater than 10Kb is fine. Any image size smaller results in the never-ending spinner and no upload.
      No min/max width/height set on image uploads in admin, ie just the defaults.
      Any ideas on how to fix?
      Using:
      PW: 3.0.175
      PHP: 7.3
      Marking it as "Resolved" rather than "Solved" as it auto-magically fixed itself. No idea whether PW, PHP, or just an internet hiccough... All good now 🤞
    • By totoff
      Dear all,
      tomorrow I'll have to introduce some editors on how to upload and edit images in image fields in Processwire. The site in question is quite image rich and I've spent some time to serve the appropriate images via scrcset already cropped for different screen sizes.
      However, the backend offers a lot of possibilities to manipulate images and most of them I'm not familiar with because as a developer I've never spent much thinking on what all the features might be good for … Yet I'm concerned that my editors work on images in the backend may interfere with my optimization strategies in the templates.
      Is there a general rule of thumb what content editors should do or not do with images in order not to break srcset strategies etc.? Maybe there is already a source of information you could point me to?
      Your recommendations are much appreciated!
    • By totoff
      Dear all,
      I'm upgrading an older side with the new custom fields for images feature as of 3.0.142. My image field is set to "Automatic" and holds a bunch of images together with their respective description on each page. New custom fields include "caption" among others and to make my live easier I I'm trying to populate "caption" with the value from the (default) description field. But unfortunately I can't seem to find out how to save the newly set values. This is my code:
      <?php foreach (page()->images as $image) { $image->set('caption', $image->description); bd($image->caption); echo files()->render("markup/views/view-card-image-fancybox.php", array('image'=>$image)); } ?> <?php $page->save(); bd($page->save()); ?> This sets the value as intended (see screenshot) but doesn't save it permanently to the database. What am I doing wrong?
      Thanks!
       

    • By Marvin
      Hello, my name Marvin, i want to ask something. I'm new at processwire, and still learn it, i try yo showing an image, at a table, the image was show, but i can't resize the image
      please HELP
      Here i attach, my code belor
      <?php $num = 1; foreach($pages->get("/files/")->children as $child) { $current = $child === $page ? " class='current'" : ''; $result = $child->images; // $result->width(900); // $result->height(100); foreach($result as $items){ foreach($pages->get($child->name)->files as $file) { // $file = $child->files; // echo $file->name; echo "<tr><td>".$num++.".</td><td>".$child->title."</td><td>".$child->text_1."</td><td>".$child->text_2."</td><td>".$child->text_3."</td><td><a href='".$file->httpUrl."'>".$file->name."</a></td><td><img src='".$items->url."'></td></tr>"; } } } ?>  
    • By fruid
      I'm using custom fields for images (as mentioned here: processwire.com/blog/posts/pw-3.0.142) for a specific images-field, the images of which need to have an HTML-caption. It works fine so far. Now I'm trying to import pages that use this field. I first exported some pages of that kind to see what the spreadsheet would look like. It seems to not separate the captions for each images but instead put all images in one cell and all captions in another.
      How could I go about importing these pages and assign the captions to the images accordingly?
×
×
  • Create New...