Question

I am drawing rotated text on canvas and then saving it to SD card as JPEG.
The problem I am facing is the canvas preview looks fine, but the rotated text in the saved image is not coming properly. When I use the default Android fonts, the final JPEG is the same as the canvas preview, but this code doesn’t work for a custom typeface.

I have uploaded both the final saved image and screenshot of canvas preview

I am using a custom view class for canvas drawing, here is my code

public class MyBringBack extends View {


    Bitmap bitmap;
    Typeface type;

public MyBringBack(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        type = Typeface.createFromAsset(context.getAssets(),"fonts/rockwell-bold.ttf"); 
         setDrawingCacheEnabled(true);
    }


@Override
protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);



    Paint paint = new Paint();
        paint.setColor(Color.BLUE);
       // paint.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
        paint.setTextSize(23);
    Paint paint1 = new Paint();
        paint1.setTextSize(40);
        paint1.setColor(Color.RED);

        canvas.rotate(90,434,110);
        canvas.drawText("Demo Text Demo Text Demo Text  ", 434, 110, paint);
        canvas.restore();
        canvas.save();
        paint1.setTypeface(type);
        canvas.rotate(90,130,185);
        canvas.drawText("Text using Typeface ", 130, 185, paint1);
        canvas.restore();
        canvas.save();
        canvas.rotate(90,180,185);
        canvas.drawText("Text using Typeface ",180, 185, paint1);
        canvas.restore();
        canvas.save();
        canvas.rotate(90,230,185);
        canvas.drawText("Text using Typeface ", 230, 185, paint1);
        canvas.restore();
        canvas.save();

        this.setDrawingCacheEnabled(true);
        Bitmap c= Bitmap.createScaledBitmap(this.getDrawingCache(), canvas.getWidth(),canvas.getHeight(), false);

        /* Saving File To SD Card   */

        OutputStream outStream = null;
        File bgv = new File("/sdcard/");
        /* To build directory if needed */
        bgv.mkdirs();

        File file = new File(bgv, "final22.jpg");

        try {
        outStream = new FileOutputStream(file);
        c.compress(Bitmap.CompressFormat.JPEG, 100, outStream);

        outStream.flush();
        outStream.close();

      } catch (FileNotFoundException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();

       } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
       }

    }

}

Is there is any problem with my code?

Please help…

thanks in advance 🙂

Answer 1

Finally after lots of research on image processing i got my answer.
For Saving the jpg exactly same as what is drawn on canvas we have to add just two line of code.
First is :

setDrawingCacheQuality(DRAWING_CACHE_QUALITY_HIGH);

and second in onDraw we have to set AntiAlias to true,refering to my code

paint1.setAntiAlias(true);

But after this also the saved image is not of same quality that of what is drawn on canvas.
to get the same crisp quality of image this two code will do the trick

paint1.setDither(true);
paint1.setFilterBitmap(true);

Dither mainly provide smooth corners,AntiAlias,Dither and FilterBitmap can also be used while drawing Bitmap on canvas.

To get more information about Dither and AntiAlias here is the link

AntiAlias

Dither