react-native-image-editor
react-native-image-editor copied to clipboard
Add web support
Feature Request
Add web support
Why it is needed
Make module cross-platform
Possible implementation
Hey, I made an investigation on how to implement .cropImage
on the web.
In general, a solution could use canvas
with 2d
context and use drawImage
(https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage) method to prepare cropped Image, then I could be returned to the user. And here my doubts started.
For native platforms, the return value is URI to a local image which is a result of transformation. On the web is actually handier and easier to implement if a function would return
-
ImageData
object https://developer.mozilla.org/en-US/docs/Web/API/ImageData generated byCanvasRenderingContext2D.getImageData()
-
Image
or its's DOM equivalent<Img/>
[https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image] usesbase64
under the hood - Uri string that would be actually
base64
encoded image - File created using FileSystem API, but it is not standard and will not work everywhere https://developer.mozilla.org/en-US/docs/Web/API/FileSystem . Also it's additional implementation effort
In addition, some users may experience issues with CORS when resizing will be implemented using canvas https://blog.codepen.io/2013/10/08/cross-domain-images-tainted-canvas/
I would like to start a discussion on the topic of web support. Personally I'm not sure if this feature is really needed.