callstack / react-native-image-editor

A library providing an API for cropping images from the web and the local file system.
MIT License
368 stars 117 forks source link

[Android] bug cropImage with base64 URI #68

Closed codiri closed 5 months ago

codiri commented 4 years ago

Summary

👋 Hi!

When i am using base64 uri with cropImage function it works perfectly with IOS but in Android i have this issue:

[Error: unknown protocol: data]

Environment info

Reproduce the issue

 const base64Uri =
      'data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAkACQAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAACQAAAAAQAAAJAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAZCgAwAEAAAAAQAAAZAAAAAA/+0AOFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/AABEIAZABkAMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2wBDAAYGBgYGBgoGBgoOCgoKDhIODg4OEhcSEhISEhccFxcXFxcXHBwcHBwcHBwiIiIiIiInJycnJywsLCwsLCwsLCz/2wBDAQcHBwsKCxMKChMuHxofLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi7/3QAEABn/2gAMAwEAAhEDEQA/APlWiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//Q+VaKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/9H5VooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//0vlWiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//T+VaKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/9T5VooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//1flWiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//W+VaKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/9f5VooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//0PlWiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//R+VaKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/9L5VooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//0/lWiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//U+VaKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/9X5VooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//1vlWiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//X+VaKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/9D5VooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//0flWiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//S+VaKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/9P5VooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//1PlWiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//V+VaKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/9b5VooooAKKKKACu18H+HbTVDcanq7FLCyXdJjI3HGcZHPA5OOeg71xVen2/wDo3wvnaPg3Fz8xH+8o/ktefmVScacYU3ZyaV+1/wDgHdl9OMqjlNXUU3bvYIfEfgq9uRp9zosdvaudonBAkXPAZsAEe/zHHvXKeKvD7eHdWazDF4XAkiY9Sh7H3B4/Wubr0/x1+/0Dw/ev/rHt8Me5yiH+ea51T+q4inGm3yyumm29Urp6m7qfWaFSVRK8bNNJLRu1tCeay8O+CbG2/tWzGo6jcJvZHOEQenII4PHQk4PSrGn2/hnxzbz2lpYrpt/Em9DHjaR07AAjJGeM88GvO9G0ttcvTayXUdvtQtvnbC8EDGfXmvT9P0Z/Bem3GsadnVLqSMxh4QDFEvBJPJY888Dt261w4yEaKt7Rus9ndpb9vhSOzCSlVd/ZpUlvom/87ni7KyMUYYKnBHuK2PD+jTa9qsOmxHaHJLt12oOSf8PesYkk5PJNenfDECO7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'

 ImageEditor.cropImage(base64Uri, {
      offset: { x: 0, y: 0 },
      size: { width: 100, height: 100 },
    })
      .then((uri) => { console.log(uri) })
      .catch((error) => { console.log(error) })
codiri commented 4 years ago

Is there any update about this issue ?!!

DevelopSmith commented 3 years ago

@codifius did you find any solution for this issue?

Hot-key commented 2 years ago

Fix ImageEditorModule.java

import java.io.ByteArrayInputStream;
import java.util.Base64;

...

private InputStream openBitmapInputStream() throws IOException {
  InputStream stream;
  if(mUri.startsWith("data:")) {
    Base64.Decoder decoder = Base64.getMimeDecoder();
    stream = new ByteArrayInputStream(decoder.decode(mUri.substring(mUri.indexOf(",") + 1)));
  }
  else if (isLocalUri(mUri)) {
    stream = mContext.getContentResolver().openInputStream(Uri.parse(mUri));
  } else {
    URLConnection connection = new URL(mUri).openConnection();
    stream = connection.getInputStream();
  }
  if (stream == null) {
    throw new IOException("Cannot open bitmap: " + mUri);
  }
  return stream;
}

...

then use patch-package

diff --git a/node_modules/@react-native-community/image-editor/android/src/main/java/com/reactnativecommunity/imageeditor/ImageEditorModule.java b/node_modules/@react-native-community/image-editor/android/src/main/java/com/reactnativecommunity/imageeditor/ImageEditorModule.java
index c053ab4..beca818 100644
--- a/node_modules/@react-native-community/image-editor/android/src/main/java/com/reactnativecommunity/imageeditor/ImageEditorModule.java
+++ b/node_modules/@react-native-community/image-editor/android/src/main/java/com/reactnativecommunity/imageeditor/ImageEditorModule.java
@@ -13,11 +13,13 @@ import java.io.File;
 import java.io.FileOutputStream;
 import java.io.FilenameFilter;
 import java.io.IOException;
+import java.io.ByteArrayInputStream;
 import java.io.InputStream;
 import java.io.OutputStream;
 import java.net.URL;
 import java.net.URLConnection;
 import java.util.Arrays;
+import java.util.Base64;
 import java.util.Collections;
 import java.util.List;
 import java.util.Map;
@@ -243,7 +245,11 @@ public class ImageEditorModule extends ReactContextBaseJavaModule {

     private InputStream openBitmapInputStream() throws IOException {
       InputStream stream;
-      if (isLocalUri(mUri)) {
+      if(mUri.startsWith("data:")) {
+        Base64.Decoder decoder = Base64.getMimeDecoder();
+        stream = new ByteArrayInputStream(decoder.decode(mUri.substring(mUri.indexOf(",") + 1)));
+      }
+      else if (isLocalUri(mUri)) {
         stream = mContext.getContentResolver().openInputStream(Uri.parse(mUri));
       } else {
         URLConnection connection = new URL(mUri).openConnection();
jsdaniell commented 7 months ago

@Hot-key solution worked to me!

retyui commented 5 months ago

Fixed in 3.2.0