Why Bitmap to Base64 String showing black background on webview in android? - android

I am using a code that combine to images into 1 by using canvas . I show that image to ImageView it looks fine. But when I try to show that into WebView it show background black to right that image. I try to change the background color in HTML but it not change color. or make transparent. Can anyone help? Result is here The above image is in ImageView and below is in WebView.
public class MyBimapTest extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView img1 = (ImageView) findViewById(R.id.ImageView01);
img1.setVisibility(View.INVISIBLE);
Drawable dra1 = img1.getDrawable();
Bitmap map1 = ((BitmapDrawable) dra1).getBitmap();
ImageView img2 = (ImageView) findViewById(R.id.ImageView02);
img2.setVisibility(View.INVISIBLE);
Drawable dra2 = img2.getDrawable();
Bitmap map2 = ((BitmapDrawable) dra2).getBitmap();
// ***
ByteArrayOutputStream baos = new ByteArrayOutputStream();
map1.compress(Bitmap.CompressFormat.JPEG, 100, baos);
byte[] b = baos.toByteArray();
String abc = Base64.encodeBytes(b);
byte[] byt = null;
try {
byt = Base64.decode(abc);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
map1 = BitmapFactory.decodeByteArray(byt, 0, byt.length);
// ***
Bitmap map = combineImages(map1, map2);
ByteArrayOutputStream bbb = new ByteArrayOutputStream();
map.compress(Bitmap.CompressFormat.JPEG, 100, bbb);
byte[] bit = bbb.toByteArray();
String imgToString = Base64.encodeBytes(bit);
String imgTag = "<img src='data:image/jpg;base64," + imgToString
+ "' align='left' bgcolor='ff0000'/>";
WebView webView = (WebView) findViewById(R.id.storyView);
webView.loadData(imgTag, "text/html", "utf-8");
Drawable end = new BitmapDrawable(map);
ImageView img3 = (ImageView) findViewById(R.id.ImageView03);
img3.setImageBitmap(map);
}
public Bitmap combineImages(Bitmap c, Bitmap s) {
Bitmap cs = null;
int width, height = 0;
width = c.getWidth() + (s.getWidth() / 2);
height = c.getHeight() + (s.getHeight() / 2);
cs = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas comboImage = new Canvas(cs);
comboImage.drawBitmap(c, 0f, 0f, null);
comboImage.drawBitmap(s, c.getWidth() - (s.getWidth() / 2), c
.getHeight()
- (s.getHeight() / 2), null);
return cs;
}
}

The JPEG format does not support alpha transparency, which is why the transparent background becomes black when you convert your original image to JPEG.
Use the PNG format instead:
map1.compress(Bitmap.CompressFormat.PNG, 100, baos);
and
String imgTag = "<img src='data:image/png;base64," + imgToString
+ "' align='left' bgcolor='ff0000'/>";

Related

How to get Alpha of a Bitmap?

I have two problems.
First I am changing the alpha of a Bitmap and saving it to an ImageView but whenever I am getting the Bitmap from the ImageView it is different to how it looks in the ImageView, the RGB values are Changed.
Second, I am wondering how to get alpha of a bitmap.
imageview=(ImageView)findViewById(R.id.image);
public Bitmap ColorDodgeBlend(Bitmap source, Bitmap layer,int alpha) {
Bitmap base = source.copy(Config.ARGB_8888, true);
Bitmap blend = layer.copy(Config.ARGB_8888, false);
IntBuffer buffBase = IntBuffer.allocate(base.getWidth() * base.getHeight());
base.copyPixelsToBuffer(buffBase);
buffBase.rewind();
IntBuffer buffBlend = IntBuffer.allocate(blend.getWidth() * blend.getHeight());
blend.copyPixelsToBuffer(buffBlend);
buffBlend.rewind();
IntBuffer buffOut = IntBuffer.allocate(base.getWidth() * base.getHeight());
buffOut.rewind();
while (buffOut.position() < buffOut.limit()) {
int filterInt = buffBlend.get();
int srcInt = buffBase.get();
int redValueFilter = Color.red(filterInt);
int greenValueFilter = Color.green(filterInt);
int blueValueFilter = Color.blue(filterInt);
int redValueSrc = Color.red(srcInt);
int greenValueSrc = Color.green(srcInt);
int blueValueSrc = Color.blue(srcInt);
int redValueFinal = colordodge(redValueFilter, redValueSrc);
int greenValueFinal = colordodge(greenValueFilter, greenValueSrc);
int blueValueFinal = colordodge(blueValueFilter, blueValueSrc);
int pixel = Color.argb(alpha, redValueFinal, greenValueFinal, blueValueFinal);
buffOut.put(pixel);
}
buffOut.rewind();
base.copyPixelsFromBuffer(buffOut);
blend.recycle();
return base;
};
bmp=ColorDodgeBlend(Bitmap source, Bitmap layer,alpha); imageview.setImageBitmap(bmp);
But when I try to save bitmap from ImageView, the rgb of saved bitmap is different to how it appears in the ImageView, changing alpha changes the value of rgb.
public Bitmap loadBitmapFromView(View v) {
Bitmap b = Bitmap.createBitmap(v.getWidth(), v.getHeight(),
Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(b);
v.draw(c);
return b
}
bitmap b=loadBitmapFromView(imageview);
saveBitmap(b);
private void saveBitmap(Bitmap bmp) {
try {
File f = new File(Environment.getExternalStorageDirectory()
+ "/Pictures/SketchPhoto/");
f.mkdirs();
Date d = new Date();
CharSequence s = DateFormat
.format("MM-dd-yy hh-mm-ss", d.getTime());
fileName = s.toString() + ".jpeg";
String fullf = f + "/" + fileName;
FileOutputStream fos = new FileOutputStream(fullf);
bmp.compress(Bitmap.CompressFormat.JPEG, 100, fos);
fos.close();
Toast.makeText(getApplicationContext(), "Sketch Saved", 100).show();
} catch (Exception ex) {
ex.printStackTrace();
}
}
I have done some research and found that it only happens when that value of alpha is smaller than 255.

Imageview display black image after decode in android

I'm working with Image steganography in android right now. For that I need to convert the image into bits array and decode it back. But when I try to convert my image back into its original shape, it showing only a black colour in my ImageView. Here is my code
btnEncode = (Button) findViewById(R.id.encode);
btnEncode.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
//imgPath.setText(imageToBase64(selectedImagePath));
ImageView imageView=(ImageView)findViewById(R.id.imageView1);
BitmapDrawable drawable = (BitmapDrawable) imageView.getDrawable();
Bitmap bitmap = drawable.getBitmap();
bytes = getBytesFromBitmap(bitmap);
StringBuilder binary = new StringBuilder();
for (byte b : bytes)
{
int val = b;
for (int i = 0; i < 8; i++)
{
binary.append((val & 128) == 0 ? 0 : 1);
val <<= 1;
}
binary.append(' ');
}
//To save the binary in newString
String ImageEncoded=new String(binary.toString());
TextView imgData=(TextView)findViewById(R.id.txtResult);
imgData.setText(ImageEncoded);
}
});
btnDecode = (Button) findViewById(R.id.decode);
btnDecode.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v)
{
// TODO Auto-generated method stub
ImageView imageView=(ImageView)findViewById(R.id.imageView1);
BitmapDrawable drawable = (BitmapDrawable) imageView.getDrawable();
Bitmap bitmap = drawable.getBitmap();
bytes = getBytesFromBitmap(bitmap);
Bitmap bmp = BitmapFactory.decodeByteArray(bytes, 0, bytes.length);
ImageView image = (ImageView) findViewById(R.id.imageView2);
image.setImageBitmap(bmp);
}
});
public static byte[] getBytesFromBitmap(Bitmap bitmap)
{
ByteArrayOutputStream stream = new ByteArrayOutputStream();
bitmap.compress(CompressFormat.JPEG, 70, stream);
return stream.toByteArray();
}
Its about your converter format. Use CompressFormat.PNG instead of CompressFormat.JPEG. This caused by "JPEGs don't do transparency like PNG".

phonegap create a bitmap from html

how can you create a bitmap from the html in the screen of the device?
I tried this but it gives me a black image output
Webview mAppView = this.webView;
float appScale = mAppView.getScale();
int scaledViewHeight = (int)(webViewHeight * appScale);
int scaledViewWidth = (int)(webViewWidth * appScale);
bmp = Bitmap.createBitmap(scaledViewWidth, scaledViewHeight, Bitmap.Config.RGB_565);
try {
os = new FileOutputStream(Environment.getExternalStorageDirectory()+"/DCIM/Camera/" + "canvas.png");
bmp.compress(CompressFormat.PNG, 90, os);
} catch(IOException e) {
Log.v("save image", "fail");
}

How to resize image for list view

i am loading image and title for list view from webservices text is f9 but image is too big.how to resize it and i want to set text in right side and image in left side in each row of list view .i am using this method Bitmap resized = Bitmap.createScaledBitmap(bitmap, 70, 70, true); but nothing appearing on emulator This is my costant class where i am loading image
public static Bitmap loadPhotoBitmap(URL url) {
Bitmap bitmap = null ;
InputStream in = null;
BufferedOutputStream out = null;
BufferedOutputStream bfs = null;
try {
FileOutputStream fos = new FileOutputStream("/sdcard/photo-tmp.jpg");
bfs = new BufferedOutputStream(fos);
in = new BufferedInputStream(url.openStream(),8192);
final ByteArrayOutputStream dataStream = new ByteArrayOutputStream();
out = new BufferedOutputStream(dataStream, 8192);
copy(in, out);
out.flush();
final byte[] data = dataStream.toByteArray();
bfs.write(data, 0, data.length);
bfs.flush();
BitmapFactory.Options opt = new BitmapFactory.Options();
bitmap = BitmapFactory.decodeByteArray(data, 0, data.length, opt);
//System.out.println(resized);
Bitmap resized = Bitmap.createScaledBitmap(bitmap, 70,70, true);
return resized;
} catch (IOException e) {
// android.util.Log.e("message", "Could not load photo: " + this, e);
System.out.println("Exception while loading image");
} finally {
closeStream(in);
closeStream(out);
closeStream(bfs);
}
System.out.println("returning");
return bitmap;
}
LazyAdapter.class
public View getView(int position, View convertView, ViewGroup parent) {
System.out.println("Exception before..");
String strUrl = Constants.vctrImagePath.elementAt(counter).toString();// getting imgurl
System.out.println("Urls...." + strUrl);
URL url =null;
try {
url = new URL(strUrl);
} catch (MalformedURLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
Bitmap bitmap = Constants.loadPhotoBitmap(url);
//Bitmap resized = Bitmap.createScaledBitmap(bitmap, 70, 70, true);
RelativeLayout layout = new RelativeLayout(mContext);
RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT);
TextView text1 = new TextView(mContext);
text1.setText(Constants.vctrCategory.elementAt(counter).toString());
LayoutParams params1 = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
params1.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
text1.setLayoutParams(params1);
text1.setTextSize(20);
text1.setGravity(Gravity.RIGHT);
layout.addView(text1);
ImageView img = new ImageView(mContext);
img.setImageBitmap(bitmap);
layout.setGravity(Gravity.CENTER_VERTICAL | Gravity.CENTER_HORIZONTAL);
layout.addView(img);
counter++;
return layout;
}
private void setContentView(ImageView image) {
// TODO Auto-generated method stub
}
Instead of
BitmapFactory.Options opt = new BitmapFactory.Options();
bitmap = BitmapFactory.decodeByteArray(data, 0, data.length, opt);
Replace that with
BitmapFactory.Options opts = new BitmapFactory.Options();
opts.inPreferredConfig = Bitmap.Config.ARGB_8888;
bitmap = BitmapFactory.decodeByteArray(data, 0, data.length, opts);
problem was not in my this bitmapfactory class.i hav resolved my isssue.
i just change code in my lazy adapter class.
Bitmap bitmap = Constants.DownloadImage(strUrl);
Bitmap resized=null;
if(bitmap!=null){
resized = Bitmap.createScaledBitmap(bitmap, 100, 100, true);
}else{
System.out.println(strUrl+ "no image here");
}
before i was resizing image in my list view.while it will resize in adpter class of list view.

Saving Android SurfaceView to Bitmap and some elements are missing

I have my SurfaceView up and running with a button to open the camera and take a picture which is used as the background and another button to add items that sit on top and can be moved around. This all works fine until I try to save the SurfaceView as a Bitmap when all I get is the background and none of the images on top.
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(_mGotImage){
canvas.drawBitmap(_mImage, 0, 0, null);
}else{
canvas.drawColor(Color.BLACK);
}
//if the array is not empty
if(!_mJazzItems.isEmpty()){
//step through each item in the array
for(JazzItem item: _mJazzItems){
//get the bitmap it is using
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), item.getBitmap());
//and draw that bitmap at its X and Y coords
canvas.drawBitmap(bitmap, item.getX(), item.getY(), null);
}
}
}
This is the method called to try and save the Canvas.
public void screenGrab(){
Bitmap image = Bitmap.createBitmap(_mPanelWidth, _mPanelHeight, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(image);
this.onDraw(canvas);
String path=Environment.getExternalStorageDirectory() + "/test2.png";
File file = new File(path);
try{
file.createNewFile();
FileOutputStream ostream = new FileOutputStream(file);
image.compress(CompressFormat.PNG, 100, ostream);
ostream.flush();
ostream.close();
}catch (Exception e){
e.printStackTrace();
}
}
The onDraw works fine, I get my camera shot in the background and can add all my items over the top and move them around. Just when I try to get a screen shot, none of the items on top are present.
Thanks for any help!!
-- UPDATE --
I have modified the screen grab method to this:
public void screenGrab(){
Bitmap image = Bitmap.createBitmap(_mPanelWidth, _mPanelHeight, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(image);
canvas.drawBitmap(_mImage, 0, 0, null);
//if the array is not empty
if(!_mJazzItems.isEmpty()){
//step through each item in the array
for(JazzItem item: _mJazzItems){
//get the bitmap it is using
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), item.getBitmap());
//and draw that bitmap at its X and Y coords
canvas.drawBitmap(bitmap, item.getX(), item.getY(), null);
}
}
String path=Environment.getExternalStorageDirectory() + "/test2.png";
File file = new File(path);
try{
file.createNewFile();
FileOutputStream ostream = new FileOutputStream(file);
image.compress(CompressFormat.PNG, 100, ostream);
ostream.flush();
ostream.close();
}catch (Exception e){
e.printStackTrace();
}
}
I can't see why this is not drawing the other images over the top...
in my case i am using this:
public static Bitmap combineImages(Bitmap c, Bitmap overLayImage, Context con) {
Bitmap cs = null;
int width, height = 0;
width = c.getWidth();
height = c.getHeight();
cs = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas comboImage = new Canvas(cs);
comboImage.drawBitmap(c, 0, 0, null);
String left = yourleftPosition;
String top = yourtopPosition;
comboImage.drawBitmap(overLayImage, Float.parseFloat(left), Float.parseFloat(top),null);
/******
*
* Write file to SDCard
*
* ****/
String tmpImg = String.valueOf(System.currentTimeMillis()) + ".png";
OutputStream os = null;
try {
String pathis = Environment.getExternalStorageDirectory()
+ "/DCIM/Camera/" + tmpImg;
os = new FileOutputStream(pathis);
cs.compress(CompressFormat.PNG, 100, os);
}
catch (IOException e) {
Log.e("combineImages", "problem combining images", e);
}
return cs;
}

Categories

Resources