When saving bitmap to disk, solid paths show artifacts

Question

[Edit: I've made a minimal project to try to narrow down what's going on. The code at the bottom still generates the same artifacts when saved]

I have an app that draws simple 2D geometry using Paths. The shapes are all solid colors, sometimes with alpha < 255, and may be decorated with lines. In the View that draws the geometry, there has never been an issue with how things get drawn. However, when I use the same code to draw to a Bitmap, and then save it as either a JPEG (with 100 quality) or PNG, there is always the same artifacting in the solid-colored areas of the output files. It's a sort of mottling that is usually associated with JPEG compression.

Screenshot of View:

Saved image:

Zoom in on artifacts:

I have tried the following

• Saving to either PNG and JPEG
• Turning dithering and antialiasing on and off
• Increasing the DPI of the Bitmap, and also allowed the Bitmap to use its default API
• Applying the matrix I use as a camera to the geometric representation, instead of applying it to the Canvas for the bitmap
• Turning HW Acceleration on and off app-wide
• Using a 3rd party library to save the Bitmap to a .bmp file

All yield the same artifacts, neither making it worse nor better.

public class MainActivity extends AppCompatActivity {
Context context;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    this.context = getApplicationContext();
}

// button OnClick listener
public void saveImage(View view) {
    new saveBitmapToDisk().execute(false);
}

public Bitmap getBitmap() {
    final int bitmapHeight = 600, bitmapWidth = 600;
    Bitmap bitmap = Bitmap.createBitmap(bitmapWidth, bitmapHeight, Bitmap.Config.ARGB_8888);
    Canvas bitmapCanvas = new Canvas(bitmap);

    float[] triangle = new float[6];
    triangle[0] = bitmapWidth / 2;
    triangle[1] = 0;
    triangle[2] = 0;
    triangle[3] = bitmapHeight / 2;
    triangle[4] = bitmapWidth / 2;
    triangle[5] = bitmapHeight / 2;

    Path solidPath = new Path();
    Paint solidPaint = new Paint();
    solidPaint.setStyle(Paint.Style.FILL);

    solidPath.moveTo(triangle[0], triangle[1]);

    for(int i = 2; i < triangle.length; i += 2)
        solidPath.lineTo(triangle[i], triangle[i+1]);

    solidPath.close();

    solidPaint.setColor(Color.GREEN);
    bitmapCanvas.drawPath(solidPath, solidPaint);
    return bitmap;
}

private class saveBitmapToDisk extends AsyncTask<Boolean, Integer, Uri> {
    Boolean toShare;

    @Override
    protected Uri doInBackground(Boolean... shareFile) {
        this.toShare = shareFile[0];
        final String appName = context.getResources().getString(R.string.app_name);
        final String IMAGE_SAVE_DIRECTORY = String.format("/%s/", appName);
        final String fullPath = Environment.getExternalStorageDirectory().getAbsolutePath() + IMAGE_SAVE_DIRECTORY;
        File dir, file;

        try {
            dir = new File(fullPath);
            if (!dir.exists())
                dir.mkdirs();

            OutputStream fOut;

            file = new File(fullPath, String.format("%s.png", appName));

            for (int suffix = 0; file.exists(); suffix++)
                file = new File(fullPath, String.format("%s%03d.png", appName, suffix));

            file.createNewFile();
            fOut = new FileOutputStream(file);

            Bitmap saveBitmap = getBitmap();
            saveBitmap.compress(Bitmap.CompressFormat.PNG, 100, fOut);
            fOut.flush();
            fOut.close();
            MediaStore.Images.Media.insertImage(context.getContentResolver(), file.getAbsolutePath(), file.getName(), file.getName());

        } catch (OutOfMemoryError e) {
            Log.e("MainActivity", "Out of Memory saving bitmap; bitmap is too large");
            return null;
        } catch (Exception e) {
            Log.e("MainActivity", e.getMessage());
            return null;
        }

        return Uri.fromFile(file);
    }

    @Override
    protected void onPostExecute(Uri uri) {
        super.onPostExecute(uri);
        Toast.makeText(context, "Image saved", Toast.LENGTH_SHORT).show();
    }
}
}

Answer 1

1. I tested your program with PNG and the file has no artifacts
2. These artifacts are a result of JPEG compression

Edit: The line

MediaStore.Images.Media.insertImage(context.getContentResolver(), file.getAbsolutePath(), file.getName(), file.getName());

was causing the conversion to jpeg.

The proper way to save the image is

ContentValues values = new ContentValues();
values.put(Images.Media.DATE_TAKEN, System.currentTimeMillis());
values.put(Images.Media.MIME_TYPE, "image/png");
values.put(MediaStore.MediaColumns.DATA, file.getAbsolutePath());
context.getContentResolver().insert(Images.Media.EXTERNAL_CONTENT_URI, values);

Here is my simplified test program that sends the generated file directly

public class Test2Activity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    new saveBitmapToDisk().execute();
  }

  public Bitmap getBitmap() {
    final int bitmapHeight = 600, bitmapWidth = 600;
    Bitmap bitmap = Bitmap.createBitmap(bitmapWidth, bitmapHeight, Bitmap.Config.ARGB_8888);
    Canvas bitmapCanvas = new Canvas(bitmap);

    Paint solidPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    solidPaint.setStyle(Paint.Style.FILL);
    solidPaint.setColor(Color.RED);
    bitmapCanvas.drawCircle(300, 300, 200, solidPaint);

    return bitmap;
  }

  private class saveBitmapToDisk extends AsyncTask<Void, Void, Uri> {
    Boolean toShare;

    @Override
    protected Uri doInBackground(Void... shareFile) {
      Context context = Test2Activity.this;
      try {
        File file = new File(context.getExternalFilesDir(null), "test.png");
        FileOutputStream fOut = new FileOutputStream(file);

        Bitmap saveBitmap = getBitmap();
        saveBitmap.compress(Bitmap.CompressFormat.PNG, 100, fOut);
        fOut.flush();
        fOut.close();
        return Uri.fromFile(file);
      } catch (OutOfMemoryError e) {
        Log.e("MainActivity", "Out of Memory saving bitmap; bitmap is too large");
        return null;
      } catch (Exception e) {
        Log.e("MainActivity", e.getMessage());
        return null;
      }

    }

    @Override
    protected void onPostExecute(Uri uri) {
      Context context = Test2Activity.this;
      Toast.makeText(context, "Image saved", Toast.LENGTH_SHORT).show();

      final Intent intent = new Intent(android.content.Intent.ACTION_SEND);
      intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
      intent.putExtra(Intent.EXTRA_STREAM, uri);
      intent.setType("image/png");
      Test2Activity.this.startActivity(intent);
    }
  }
}

Answer 2

Artifacts like this are natural and unavoidable consequence of JPEG compression.

They should not crop up in PNG compression. If you are getting such artifacts when you create a PNG file, I'd wager that you are not creating a PNG stream at all, but rather a JPEG stream in a file with a PNG extension. No decent decoder relies on the file extension.