Request: Use without local path

[timomeh]

It would be great to be able to use the module with react-native images/URIs, not only with local paths. Is there maybe another possibility to pass the image to the module?

[chetstone]

I haven’t tried it. It would probably be easier on Android because on iOS it’s only been tested with assets-library images. Anything's possible. Let us know what you come up with.

[timomeh]

I've looked into the Android Implementation and I think you're right, shouldn't be that hard. The Palette.Builder just needs the Bitmap, and for example a HTTP Image can be converted to a Bitmap easily with an InputStream.

Unfortunately, my ObjectiveC/Swift Knowledge is near zero, so I have now clue what's going on there.

[niknomad]

@timomeh i tried something out by using webview .
we can extract the color pattern using canvas in HTML so passing the image from URI /URL to webview can actually allow us to get that image on a Html Canvas and then by performing basic js we can get the dominant color or the color pattern.

[aurnik]

@timomeh Do you have any code examples of this method working?

[timomeh]

@aurnik No, I didn't get it working.

[aurnik]

Woops, sorry I meant to direct that at @niknomad

[chetstone]

At one point I spent some time trying to get node-vibrant to work, but failed. I didn't think of using a webview. Perhaps there you could use vibrant.js. @niknomad it would be great to see an example.

[aurnik]

@chetstone Do you know how to include the Vibrant file in the WebView? If I can figure that out I think I can post a working example for this method.

[niknomad]

@aurnik @chetstone @timomeh
Please have a look at the file attached .i created a component Canvas to extract color from the image
just import canvas , convert the image coming from url to Base64 and call

to get the blobData ie base 64 format image use xmlHttpRequest and passed both url and blob data to canvas component.

CanvasColorExtractor.txt

[chetstone]

@niknomad Thanks! That's a great start.

@aurnik Sorry I haven't worked with webview. But as a guess, perhaps you could get started by just using something like

<script src="https://cdn.css.net/libs/vibrant.js/1.0.0/Vibrant.min.js" >

in @niknomad's htmlContent string. Of course, it won't work if the device is offline, but it might work for experimentation. Later we could figure out how to perhaps download the vibrant.js code and its dependencies in npm postinstall and somehow require it.

[efkan]

I've added some code to make the module works with Base64 string (URI) on Android. It works.

import android.util.Base64;
...
	...
	private Palette getPalletFromBase64(final String base64Data, final Callback callback) {
		String pureBase64Encoded = base64Data.substring(base64Data.indexOf(",")  + 1);
		byte[] decodedBytes = Base64.decode(pureBase64Encoded, Base64.DEFAULT);
		Bitmap bitmap = BitmapFactory.decodeByteArray(decodedBytes, 0, decodedBytes.length);

		if (bitmap == null) {
			callback.invoke("Bitmap Null");
		} else if (bitmap.isRecycled()) {
			callback.invoke("Bitmap Recycled");
		}
		return Palette.from(bitmap).generate();
	}


	@ReactMethod
	public void getNamedSwatches(final String realPath, final Callback callback) {

		// Palette palette = getPallet(realPath, callback);
		Palette palette = getPalletFromBase64(realPath, callback);
		...
		...
	}

	@ReactMethod
	public void getAllSwatches(final String realPath, final Callback callback) {

		// Palette palette = getPallet(realPath, callback);
		Palette palette = getPalletFromBase64(realPath, callback);
		...
		...
	}

[chetstone]

Great! Thank you! Could you make this into a PR?

…

On Jul 12, 2017, 06:29 -0600, efkan ***@***.***>, wrote: I've added some code to make the module works with Base64 string (URI) on Android. It works. import android.util.Base64; ... ... private Palette getPalletFromBase64(final String base64Data, final Callback callback) { String pureBase64Encoded = base64Data.substring(base64Data.indexOf(",") + 1); byte[] decodedBytes = Base64.decode(pureBase64Encoded, Base64.DEFAULT); Bitmap bitmap = BitmapFactory.decodeByteArray(decodedBytes, 0, decodedBytes.length); if (bitmap == null) { callback.invoke("Bitmap Null"); } else if (bitmap.isRecycled()) { callback.invoke("Bitmap Recycled"); } return Palette.from(bitmap).generate(); } @ReactMethod public void getNamedSwatches(final String realPath, final Callback callback) { // Palette palette = getPallet(realPath, callback); Palette palette = getPalletFromBase64(realPath, callback); ... ... } @ReactMethod public void getAllSwatches(final String realPath, final Callback callback) { // Palette palette = getPallet(realPath, callback); Palette palette = getPalletFromBase64(realPath, callback); ... ... } But I cannot make decision about the is result wrong or correct or due to my misunderstanding. Top line of my result like the below: Swatch [RGB: #ff006aac] [HSL: [203.02325, 1.0, 0.3372549]] [Population: 5972] [Title Text: #97ffffff] [Body Text: #d6ffffff] RGB: #ff006aac: Wrong. However, if the first two characters are removed the result of #006aac is been correct. HSL: [203.02325, 1.0, 0.3372549]: Correct. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[efkan]

Unfortunately I had just tried this module. Than I removed it together with the code above 😞

But I'm sure someone who needs this feature would use the code above after polished it into a PR!

[hu9osaez]

I made my own library to extract the dominant colors from a remote image. Just for Android. ✌️

https://github.com/hasaezs/react-native-dominant-color

[ValeriiKov]

At the moment there is no library to support extracting colors using URL from an image for iOS (but there are many for Android). So guys this is your chance to be first.