Wp-calypso: Image Editor: after editing image, the transient media has incorrect width/height

[lamosty]

In MediaActions.update method from file lib/media/actions, we are not setting correct width/height of updated media.

Let's say I edit an image, decrease its width and height and click "Done" in the image editor. MediaActions.update is called and the new image is in blob format. However, its width and height is assigned from MediaStore.get( siteId, mediaId ) which is basically the width and height of the image before editing it in image editor.

After the image is returned from server, it has correct width and height. However, if we want to optimistically render the transient blob edited image, it gets rendered with original width and height. After the image is loaded from server, its size changes to correct one creating undesirable effect of jumping in the post/page editor.

Solution

To fix it, before dispatching RECEIVE_MEDIA_ITEM in the MediaActions.update method, we should create new Image, assign it the blob (data) URL and in the image's onload function, get its width and height. only then we should dispatch RECEIVE_MEDIA_ITEM with correct width/height.

Possible issue(s)

However, there might be a race condition in which the image is uploaded to server sooner than created with new Image. it's probably very unlikely but in case it happens, it would overwrite the final image with blob image in post/page editor.

/cc @retrofox @gwwar

[gwwar]

To fix it, before dispatching RECEIVE_MEDIA_ITEM in the MediaActions.update method, we should create new Image, assign it the blob (data) URL and in the image's onload function, get its width and height.

Could we look into updating the image editor callback? We should know the exact media dimensions from the image-editor before we upload.

[retrofox]

To fix it, before dispatching RECEIVE_MEDIA_ITEM in the MediaActions.update method, we should create new Image, assign it the blob (data) URL and in the image's onload function, get its width and height.

Could we look into updating the image editor callback? We should know the exact media dimensions from the image-editor before we upload.

yup, I think it would work. This issue will be executed when the image is restored too?

[gwwar]

You're right @retrofox.

On Edit: Update the content_url plus new dimensions
On Restore: we'll need to mark transient plus do an image load for the dimensions

@lamosty if it's simpler we can do the img load event for both

[lamosty]

This issue will be executed when the image is restored too?

Nope. When image is restored, there is no transient image because we have to load the original image from backend before restoring.

[msmithgu]

If the fix for this is merged, can we move this issue to the Done column?

[ramonjd]

Hi @lamosty, me again. :)

I can take a look at this if you haven't already.

Just to confirm: restore image seems to be out of scope since we have to perform a backend call to get the original image.

Cheers.

[ramonjd]

Pull request: #16781

[gwwar]

I believe this was closed by #16781