Changing bitmap color/hue efficiently in Android - android

I am using the following method to change the hue of a bitmap:
public Bitmap changeHue( Bitmap source, double hue ) {
Bitmap result = Bitmap.createBitmap( screenWidth, screenHeight, source.getConfig() );
float[] hsv = new float[3];
for( int x = 0; x < source.getWidth(); x++ ) {
for( int y = 0; y < source.getHeight(); y++ ) {
int c = source.getPixel( x, y );
Color.colorToHSV( c, hsv );
hsv[0] = (float) ((hsv[0] + 360 * hue) % 360);
c = (Color.HSVToColor( hsv ) & 0x00ffffff) | (c & 0xff000000);
result.setPixel( x, y, c );
}
}
return result;
}
It works perfectly and maintains the luminance of the bitmap. However this method is very slow when changing the hue of a bitmap size 800*480 or higher. How can I optimize it without losing too much image quality?

If you wrap your Bitmap in an ImageView there is a very simple way:
ImageView circle = new ImageView(this);
circle.setImageBitmap(yourBitmap);
circle.setColorFilter(Color.RED);

Related

Draw outline from image

I wanted to draw a contour around the picture by drawing and expanding a second picture in the Background, but I wasn't very successful, how can I draw a regular stroke?
The contour I drew:
The contour I want to draw:
My Code;
private Bitmap ContourBitmap() {
int strokeWidth = 8;
Bitmap originalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.flower_icon);
Bitmap newStrokedBitmap = Bitmap.createBitmap(originalBitmap.getWidth() + 2 * strokeWidth,
originalBitmap.getHeight() + 2 * strokeWidth, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(newStrokedBitmap);
float scaleX = (originalBitmap.getWidth() + 2.0f * strokeWidth) / originalBitmap.getWidth();
float scaleY = (originalBitmap.getHeight() + 2.0f * strokeWidth) / originalBitmap.getHeight();
Matrix matrix = new Matrix();
matrix.setScale(scaleX, scaleY);
canvas.drawBitmap(originalBitmap, matrix, null);
canvas.drawColor(Color.WHITE, PorterDuff.Mode.SRC_ATOP); //Color.WHITE is stroke color
canvas.drawBitmap(originalBitmap, strokeWidth, strokeWidth, null);
}
I think you are on the right track...
Here is a strategy, instead of scaling just draw the same original picture a few times each time slightly offset, see sample below:
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var img = new Image;
img.onload = draw;
img.src = "http://i.stack.imgur.com/UFBxY.png";
var s = 10, // thickness scale
x = 15, // final position
y = 15;
function draw() {
ctx.globalAlpha = 0.2
ctx.filter = 'brightness(0%)'
for (i = 0; i < 360; i++)
ctx.drawImage(img, x + Math.sin(i) * s, y + Math.cos(i) * s);
ctx.globalAlpha = 1
ctx.filter = 'none'
ctx.drawImage(img, x, y);
}
<canvas id=canvas width=350 height=600></canvas>
I applied a filter = 'brightness(0%)' but there are many more you can apply:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter
I'm using HTML canvas but that same idea should "translate" nicely to an android canvas.

Android RGB to YCbCr Conversion and output to imageView

I am doing an image processing which require to convert RGB bitmap image to YCbCr color space. I retrieved RGB value for each pixel and apply the conversion matrix to it.
public void convertRGB (View v) {
if (imageLoaded) {
int width = inputBM.getWidth();
int height = inputBM.getHeight();
int pixel;
int alpha, red, green, blue;
int Y,Cb,Cr;
outputBM = Bitmap.createBitmap(width, height, inputBM.getConfig());
for (int x = 0; x < width; x++) {
for (int y = 0; y < height; y++) {
pixel = inputBM.getPixel(x, y);
alpha = Color.alpha(pixel);
red = Color.red(pixel);
green = Color.green(pixel);
blue = Color.blue(pixel);
Y = (int) (0.299 * red + 0.587 * green + 0.114 * blue);
Cb = (int) (128-0.169 * red-0.331 * green + 0.500 * blue);
Cr = (int) (128+0.500 * red - 0.419 * green - 0.081 * blue);
int p = (Y << 24) | (Cb << 16) | (Cr<<8);
outputBM.setPixel(x,y,p);
}
}
comImgView.setImageBitmap(outputBM);
}
}
The problem is he output color is different with original. I tried to use BufferedImage but it do not work in Android
Original:
After Conversion:
May I know what is the correct way to handle YCbCr image in android java.
Try setting using below code
ByteArrayOutputStream out = new ByteArrayOutputStream();
YuvImage yuvImage = new YuvImage(your_yuv_data, ImageFormat.NV21, width, height, null);
yuvImage.compressToJpeg(new Rect(0, 0, width, height), 50, out);
byte[] imageBytes = out.toByteArray();
Bitmap image = BitmapFactory.decodeByteArray(imageBytes, 0, imageBytes.length);
iv.setImageBitmap(image);
Check documentation for detailed description for YuvImage Class.

Best way to get bitmap pixels array in android?

I am new to Android and need to process a bitmap to extract the pixel information into a multi-dimensional array by collecting only the black pixels i.e. R = 0, G = 0, and B = 0. I noticed that there is a GetPixel(x, y) method which is apparently slow and I need something like this instead. But I'm lost on how to implement a better GetPixel(x, y) method using information from GetPixels(). I am trying something like this currently:
private static int[][] GetPixels(Bitmap bmp)
{
int height = bmp.getHeight();
int width = bmp.getWidth();
int length = width * height;
int[] pixels = new int[length];
bmp.getPixels(pixels, 0, 0, 0, 0, width, height);
int[][]result = new int[width][height];
for(int pixel = 0, x = 0, y = 0; pixel < pixels.length; pixel += 4)
{
int argb = pixels[pixel];//how to access pixel information?
result[x][y] = argb;//store only black pixels??
x++;
if(y == width)
{
x = 0;
y++;
}
}
return result;
}

In-memory bitmap transformation

I have the following problem. I started with a bitmap transformation routine that works
flawlessly for any kind of transformation I can throw at it.
Bitmap transform(Bitmap src) {
// ... any kind of transformation , for example GAMMA
double gama = 0.8;
int[] tR = new int[256];
int[] gG = new int[256];
int[] tB = new int[256];
for(int i = 0; i < 256; ++i) {
tR[i] = (int)Math.min(255, (int)((255.0 * Math.pow(i / 255.0, 1.0 / gama)) + 0.5));
tG[i] = (int)Math.min(255, (int)((255.0 * Math.pow(i / 255.0, 1.0 / gama)) + 0.5));
tB[i] = (int)Math.min(255, (int)((255.0 * Math.pow(i / 255.0, 1.0 / gama)) + 0.5));
}
// apply transformation to the old bitmap -> bmOut
int wid = src.getWidth(), hei = src.getHeight();
Bitmap bmOut = Bitmap.createBitmap(wid, hei, src.getConfig());
int A, R, G, B;
for(int x = 0; x < wid; x++) {
for(int y = 0; y < hei; y++) {
int pixel = src.getPixel(x, y);
A = Color.alpha(pixel);
R = tR[Color.red(pixel)];
G = tG[Color.green(pixel)];
B = tB[Color.blue(pixel)];
bmOut.setPixel(x, y, Color.argb(A, R, G, B));
}
}
return bmOut;
}
But it is PAINFULLY slow - caused by the getPixel() / setPixel() brothers, sisters.
No problem, says I, I'll just use a memory buffer (like in the old StretchBlt() days). So, I did a MAJOR rewrite, creating the following gem of software engineering :)
Bitmap transform(Bitmap src) {
// ... transformation array are built here
// apply transformation
int wid = src.getWidth(), hei = src.getHeight();
Bitmap bmOut = Bitmap.createBitmap(wid, hei, src.getConfig());
int[] pixs = new int[wid*hei]; // changed
src.getPixels(pixs, 0, wid, 0, 0, wid, hei); // changed
int A, R, G, B;
for(int x = 0; x < wid; x++) {
for(int y = 0; y < hei; y++) {
int off = ( x * y ) + y; // changed
int pixel = pixs[off]; // changed
A = Color.alpha(pixel);
R = tR[Color.red(pixel)];
G = tG[Color.green(pixel)];
B = tB[Color.blue(pixel)];
pixs[off] = Color.argb(A, R, G, B); // changed
}
}
bmOut.setPixels(pixs, 0, wid, 0, 0, wid, hei); // changed
return bmOut;
}
Runs fast, even gets a correct result IF THERE IS NO TRANSFORMATION. But it falls apart
if I try to massage the pixels (apply transformations). So I did comparison of ARGB pixels from getPixel() vs array of pixels values from getPixels(...) and they are different (well, the first 2 are the same, which leaves me with about zillion that are not).
array getPixel
a r g b a r g b
------------------
ff65340b ff65340b
ff64330a ff64330a
ff66320b ff63320a
ff65310a ff613008
ff66300c ff62300d
ff67310d ff62300d
ff68300d ff622d0d
ff69310e ff5f2a0a
....
Anybody knows what I'm doing wrong this time? I am not willing to give up the speed of
the mem-array solution yet.
Thanks, sean
It should be
int off = ( y * wid ) + x;
By the way, I think the two loops is unnecessary, you can simply do:
for (int off = pixs.length - 1; off >= 0; off--)

bitmapshader and canvas.scaling android

Does anyone have a hint or explanation for the following problem ?
I draw a path with a bitmapshader. When canvas is not scaled, it looks good ( first picture ).
When I scale into ( zooming in ) the bitmapshader is not be scaled and looks very ugly. I tried several things with recreating the bitmapshader after zooming in, but did not succeed :-(. Does anyone have a hint ?
No Scaling it looks good :
when scaling it looks ugly:
Code :
canvas.scale(scalex, scaley);
canvas.translate(itranslatex, itranslatey);
fillBMP = makePatternCross(fscalex, 1, Color.GREEN/*,fscalex,fscaley*/);
fillBMPshader = new BitmapShader(fillBMP, BitmapShader.TileMode.REPEAT, BitmapShader.TileMode.REPEAT);
paintshader = new Paint();
paintshader.setShader(fillBMPshader);
canvas.drawPath(cpath.path, paintshader);
private static Bitmap makePatternCross(float fSize, float fStrokewith,int iColor) {
Log.v("Create Patter makePatternCross","makePatternCross");
float fBitmapSizeOrig = 10;
fBitmapSizeOrig=fBitmapSizeOrig*fSize;
Bitmap bm = Bitmap.createBitmap((int)fBitmapSizeOrig,(int) fBitmapSizeOrig,Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(bm);
//c.scale(200, 200);
c.drawColor(Color.WHITE);
Paint p = new Paint();
p.setColor(iColor);
//p.setStrokeWidth(iStrokewith);
p.setStrokeWidth(fStrokewith/fSize);
p.setStrokeWidth((float) 0.000001);
c.drawLine(0, 0, fBitmapSizeOrig, fBitmapSizeOrig, p);
c.drawLine(0, fBitmapSizeOrig, fBitmapSizeOrig, 0, p);
if (fSize != 1) {
int iNewSize = (int) (( fBitmapSizeOrig) * fSize);
bm = Bitmap.createScaledBitmap(bm, iNewSize, iNewSize, false);
}
int width = bm.getWidth();
int height = bm.getHeight();
for (int x = 0; x < width; x++) {
for (int y = 0; y < height; y++) {
if (bm.getPixel(x, y) == Color.WHITE) {
bm.setPixel(x, y, Color.TRANSPARENT);
} else {
// bm.setPixel(x, y, bm.getPixel(x, y));
}
}
}
return bm;
}
Not sure exactly if this is what your looking for. But if you use a matrix to scale the bitmap it retains more quality than normal scaling.
Matrix matrix = new Matrix();
matrix.postScale(desiredScale, desiredScale);
Bitmap scaledBitmap = Bitmap.createBitmap(sampledSrcBitmap, 0, 0, sampledSrcBitmap.getWidth(), sampledSrcBitmap.getHeight(), matrix, true);
Also when going from a lesser resolution to a higher you can try this as well:
Options options = new BitmapFactory.Options();
options.inScaled = false;
Bitmap source = BitmapFactory.decodeResource(a.getResources(), path, options);

Categories

Resources