search

nanxiaobei / antd-img-crop

🗡 An image cropper for Ant Design Upload
MIT License
497 stars 156 forks source link

Preview after cropping is blacked out on mobile #135

Closed jzzfs closed 3 years ago

jzzfs commented 3 years ago

Issue Both of these two processes end up with a blacked-out preview:

  1. Click upload -> take an image -> crop it -> click OK
  2. Click upload -> use an existing image -> crop it -> click OK

Reproducible on https://codesandbox.io/s/antd-img-crop-4qoom5p9x4 on any mobile browser -- I've tested

Video: ezgif-2-65b77e07c879

Screenshot: IMG_17AFB6C82016-1

nanxiaobei commented 3 years ago

imgWindow.document error is in the demo code: https://codesandbox.io/s/antd-img-crop-4qoom5p9x4

And demo code updated.

jzzfs commented 3 years ago

Thanks. The sandbox err must've been a coincidence but the mobile error still persists -- I'm unable to neither upload saved pictures nor freshly taken ones. Mind you, the cropper is able to render the canvas but the "OK" click results in a blacked out image. Can you check on your phone?

jzzfs commented 3 years ago

I've cloned the module and everything works fine until the canvas modifications begin.

In other words, if I skip the canvas manipulations (zoom/move/rotate) and resolve the naturalImg.src and don't export the canvas to the file, the naturalImage b64 source renders correctly.

The problem cannot be the canvas -> blob -> file conversion because if I resolve canvas.toDataURL('image/jpeg'), it results in an already "corrupted" data url...

This makes me think it may be some mobile canvas manipulation inconsistency?

nanxiaobei commented 3 years ago

There are some issues about it before:

https://github.com/nanxiaobei/antd-img-crop/issues/30 https://github.com/nanxiaobei/antd-img-crop/issues/55

PR has been added before, but I don't know why there are still problems. At present, I have no time to solve this problem, sorry.

jzzfs commented 3 years ago

OK, thanks for the heads-up.

jzzfs commented 3 years ago

For those that stumble on this in the future -- it turns out, canvas dimension vary across devices. The best bet it to downsize/compress the image before passing it to the cropper. More on this in this thread.