react-native-image-editor icon indicating copy to clipboard operation
react-native-image-editor copied to clipboard

Add web support

Open jayu opened this issue 5 years ago • 0 comments

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 by CanvasRenderingContext2D.getImageData()
  • Image or its's DOM equivalent <Img/> [https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image] uses base64 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.

jayu avatar Nov 16 '19 15:11 jayu