Error with Code 39 barcode: Gray lines showing with barcode bars when inserting inside a image

Question

I created a blank png image and inserted some objects inside of it. like text, logo, barcode image. Now I am getting issue with barcode image.

When I am inserting barcode-image inside of the blank png

And i opened final image I found grey lines showing with barcode bars.(You can see grey line when you will zoom image 4 or more times).Following is the final-image.png you can see or download..

I looked my barcode image there are no grey lines. (You can see multiple time zoom with no grey lines).Following is the barcode.png image you can see or download..

I can't able to scan barcode with scanner because of grey lines present it the new image.

I created barcode image using zxing library and used following code for insert inside of the final-image.

   ZXBitMatrix* result = [writer encode:@"B51554" format:kBarcodeFormatCode39 width:232 height:54 error:&error];
   CGImageRef imageRef = CGImageRetain([[ZXImage imageWithMatrix:result] cgimage]);
   UIImage* uiImage = [[UIImage alloc] initWithCGImage:imageRef];
   [uiImage drawInRect:CGRectMake(14, 168, 116, 27) blendMode:kCGBlendModeNormal alpha:1.0];

Please suggest is there any way with that At the time of insert barcode image i not loss quality or i not get grey lines inside of the final-image. Thanks for help

Answer 1

The effect you are seeing is called anti-aliasing.

In your original image, the bars are perfectly aligned with pixels. They are either 2 or 4 pixels wide. Overall, the image is 232 pixels wide (include some white space on the left and right hand side).

In the combined image (incl. text and logo), the barcode is approximately 300 pixels wide. This results in a scaling factor of about 1.4. It is no longer possible to properly align the bars with pixels as they are approximately 2.7 and 5.5 pixels wide. So anti-aliasing kicks in. When the image is scaled, pixels that are only partially covered by a bar become gray. For the human eye, this retains the visual impression of regularly spaced bars.

Anti-aliasing usually isn't a problem for barcode readers. Since you are stating that the barcode can't be scanned, it indicates that you are working at the lower limit of image resolution.

The best option is probably to considerably increase the resolution of the image. I can't tell if this is possible in your specific case. It wouldn't make much sense if the image is then displayed on a low resolution display.

The next best option is to ensure that the image is scaled such that it perfectly aligns with pixels, i.e. use a scale factor of 1, 1.5 or 2 and place it at a position that is an integer value.

Just turning off anti-aliasing and still using a fractional scaling factor will most likely not work. Bars will be aligned with pixels but their width changes. Instead of being 2 and 4 pixels wide (or 3 and 6), they will be 1 and 3 or 3 and 5 pixels wide, which will be a problem for the scanner as well.