11

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;
}

}

Arslan Anwar
  • 18,746
  • 19
  • 76
  • 105

1 Answers1

28

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'/>";
MusiGenesis
  • 74,184
  • 40
  • 190
  • 334
  • Thanks so much...was using compression format JPEG before. get more detail here http://developer.android.com/reference/android/graphics/Bitmap.CompressFormat.html – CoDe Oct 10 '13 at 06:47
  • Perfect answer till compress() however, Where to apply imgTag? Can you please help me? – VVB Nov 10 '16 at 09:31
  • @VVB: the two lines that I put in my answer are both modifications to the code that OP posted. In his code, look for the line `webView.loadData(imgTag, "text/html", "utf-8");` - this is the place where the tag gets added to the web page being built. – MusiGenesis Nov 11 '16 at 12:44