Scaling

[robstott]

Hi,

Is it possible to have scaling of <1?

It's common, to need to create a barcode at 80% size, for example (hence 0.8 scale).

Much appreciated (and fingers crossed)

Cheers

[metafloor]

Typically scale=1 maps to a 1px module width. For most images, getting any smaller than that will be a bit tricky....

What barcode type do you need to print at 80%? And why?

[jumanahalasadi]

Hey @metafloor having the same issue. I need the module width to be exactly 0.0133 inches, to be read properly by my barcode scanner. Is there a way to achieve this and set it consistently in my application? Can you achieve this through scale?

[metafloor]

I will assume you are printing to a 300dpi printer. I don't think it changes if the printer is actually 600dpi or 1200dpi, as the numbers scale linearly.

1/300 = 0.0033. So 4 dots is 0.0133 inches (the reason why the EAN/UPC spec uses that number), and corresponds to scale=4 in bwip-js.

Now it comes down to how your application is printing. Browsers are tricky as they have moved to a WYSIWYG approach to printing and images often get printed as they are rendered on screen. But you can try displaying the image at 25% scale i.e. 1/4.

If that doesn't work, you will have to use a PDF for printing.

[jumanahalasadi]

@metafloor Thanks for the quick reply!

This is for PDF 417 btw...

We are not printing, but we need to save the browser screen to PDF. We have two issues, we need to get these properties

• module width = 0.0133
• module width / height ratio = 2
• ec = 5

So you're saying in bwip this is the equivalent? scale: 4, height: 50, width: 100, eclevel: 5

Thanks again!

[metafloor]

First, I do not recommend specifying both width and scale. They do not play well together as they both affect the resulting scaling factor. Best is to just specify scale and maybe height. That will create an "undistorted" image and will give you the best chance of scaling it correctly in the pdf.

Second, now that I know what you are trying to do, I will change my advice. Use scale=1 and set the image scale in the html to 133% so the layout correctly accommodates the image size. That gives you a simple conversion rule when transferring the bar code image to the pdf. 1px == 0.0133in. Let me explain the reasoning.

The problem with converting html to pdf is the resolution. The html standard renders at 96dpi (essentially 0.01in resolution) which is not a convenient factor of 0.0133. For that matter, it is really inconvenient and results in lots of rounding errors.

For my day job (which involves manufacturing and warehouse automation), we print a lot of html with bar code images using a customized version of the htmltopdf package. So I speak from experience when I say it is tricky to hit a 0.0133in module width. It can be done, but requires specialized code that knows how to transfer an image that was nominally rendered at 96dpi to the pdf with the correct resolution. And working with the simple conversion factor of 1px == 0.0133in makes it much easier.

[jumanahalasadi]

Awesome, thank you. @metafloor

So here are my bwip properties. I have also to define rows and columns. Rows will vary depending on the barcode.

scale: 1, height: 50, rows: variable, columns: 12, eclevel: 5

Just to confirm you mean to scale the canvas on print (save to PDF option).. something like this?

I can use a media query for print:

@media print {
   canvas {
      transform: scale(1.33);
   }
}

[metafloor]

You are rendering to canvas then to pdf? That is going to be difficult as canvas renders at 96dpi and scaling to 133% will use a bicubic resampling with the end result being a blurry image. Can you render directly from html to pdf?

[jumanahalasadi]

@metafloor I am using the angular bwip-js version, so I am not sure how to do that. https://www.npmjs.com/package/bwip-angular2

[metafloor]

Ok that makes more sense. I was thinking you were generating PNG images from bwip-js. Go with the canvas transform.

[jumanahalasadi]

Thank you, you’ve been super helpful! I appreciate all your quick replies to my questions.

On Thu, Mar 25, 2021 at 4:51 PM metafloor @.***> wrote:

Ok that makes more sense. I was thinking you were generating PNG images from bwip-js. Go with the canvas transform.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/metafloor/bwip-js/issues/198#issuecomment-807463354, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADLOCIFGWJFLBSR2HHZVFUDTFOO37ANCNFSM4ZCMMNHA .

-- B. Regards, Jumanah

[robstott]

On 13 Mar 2021, at 23:53, metafloor @.***> wrote:

What symbol do you need to print at 80%? And why?

Hi,

Barcodes are often printed <100% on packaging - as an example - due to space limitations. The packaging industry works to GS1 standards* which allows 80-200% magnification. In practice, I’ve seen them go down to 50%, although that tends to be frowned on.

That’d usually be ITF14, EAN8, EAN13, UPCA, UPCE - although in practice it could be any code at any magnification.

Hope that makes some sense!

Regards Rob

• See p14 here: https://www.gs1uk.org/sites/default/files/How_to_Barcoding_Getting_it_right.pdf

[metafloor]

Printing requirements are what drive symbol generation. You have to match the module width to the dpi of the printer. The percentages you talk about are relative to recommended symbol size in the bar code spec. That does not tell us anything about the size of the bar code in terms of dots/pixels per module width. You said you want a bar code that is 80% of recommended size; that could translate to a module width of 2-6 dots/pixels, depending on the resolution of the printer.

As an example, standard industrial label printers are often 200dpi. That means module width is a multiple of 0.005in. So you can never meet the 0.0133in module width required for EAN/UPC and is the reason 200dpi printers cannot be used to produce bar codes for the retail channel.

So you have to match the symbol generation to the resolution of the printer, and the resolution of the printer to the labeling/packaging requirements.