Reportlab Code128 Barcode as an HTML image tag using data URI scheme in Python

Question

I need to create Code128 barcodes with Python / Django that need to be embedded in an HTML document.

I do not want to make temporary (or cached) files on disk. This is why I want to implement them as a data URI scheme.

The result should be something like this:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"> 

Can you recommend me an easy way to do this?

Now I use ReportLab to create such barcodes and embed them in PDF files, but I do not know how to export them as a data URI scheme. If this is the recommended way to do it.

Answer 1

This is my own solution:

 from base64 import b64encode from reportlab.lib import units from reportlab.graphics import renderPM from reportlab.graphics.barcode import createBarcodeDrawing from reportlab.graphics.shapes import Drawing def get_barcode(value, width, barWidth = 0.05 * units.inch, fontSize = 30, humanReadable = True): barcode = createBarcodeDrawing('Code128', value = value, barWidth = barWidth, fontSize = fontSize, humanReadable = humanReadable) drawing_width = width barcode_scale = drawing_width / barcode.width drawing_height = barcode.height * barcode_scale drawing = Drawing(drawing_width, drawing_height) drawing.scale(barcode_scale, barcode_scale) drawing.add(barcode, name='barcode') return drawing def get_image(): barcode = get_barcode(value = '01234567890', width = 600) data = b64encode(renderPM.drawToString(barcode, fmt = 'PNG')) print '<img src="data:image/png;base64,{0}">'.format(data) 

And also you can get a barcode rotated 90 °:

 def get_barcode_rotated(value, width, barWidth = 0.05 * units.inch, fontSize = 30, humanReadable = True): barcode = createBarcodeDrawing('Code128', value = value, barWidth = barWidth, fontSize = fontSize, humanReadable = humanReadable) drawing_width = width barcode_scale = drawing_width / barcode.width drawing_height = barcode.height * barcode_scale drawing = Drawing(drawing_width, drawing_height) drawing.scale(barcode_scale, barcode_scale) drawing.add(barcode, name='barcode') drawing_rotated = Drawing(drawing_height, drawing_width) drawing_rotated.rotate(90) drawing_rotated.translate(0, -drawing_height) drawing_rotated.add(drawing, name='drawing') return drawing_rotated 

Here is an example:

http://pastehtml.com/view/ci7qei4k1.html

Answer 2

That should do the trick. I used code 128 to create barcodes.

the code

 from Code128 import Code128 from base64 import b64encode val = "9782212110708" Code128().getImage(val, path="./") data = b64encode(open(val + '.png').read()) print '<img src="data:image/png;base64,{0}">'.format(data) 

Exit

 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIMAAAAyAQAAAABXcFUb AAAAjklEQVR4nGP8r2v6J/ihYotFKrs5qx9H2TwmBnQwKjIqMnRFGP+jCTzErkvS6IR80Yu5iScU GBgYGFgYGP4b3j6t9Xn+ZG4jA6gIAxtDos26ROHFcF2M+32/XPjLwPCX8QLMnAOfXyz4xcDA8B+m 63/djHUCHxkYfkEt+///v8zHJg6GBpbi4/L///9/AADHAS8/nZ4QEQAAAABJRU5ErkJggg=="> 

UPDATE

in the comments, it was proposed to change the Code128 module so that it does not save the image in the file system. You can modify Code128 to return an image object to you instead of saving it to a file. To do this, you will need to change one line of code. Change line 162 from:

 im.save(path+value+"."+lower(extension), upper(extension)) 

in

 return im 

Answer 3

Have you tried to collect the barcode on the fly with each character represented with its own image data? Here is an example:

<IMG alt = "105, {C} Start" title = "105, {C} Start" src = "data: image / PNG; base64, iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy + cYDAAAABlBMVEUAAAD /// + l2Z / dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz / ACxgALsAjajKmzkAAAAASUVORK5CYII =" width = " 30 "height =" 60 "> <IMG alt =" 00, A: {space}, B: {space} "title =" 00, A: {space}, B: {space} "src =" data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy + cYDAAAABlBMVEUAAAD /// + l2Z / dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz / ACZgAK8Ah / KrWu0AAAAASUVORK5CYII = "width =" 30 "height =" 60 "> <img alt =" 98, A: {Escape B}, B: {Escape A} "title =" 98, A: {Escape B}, B: {Escape A} "src =" data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy + cYDAAAABlBMVEUAAAD /// + l2Z / dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz / AAugALkArBSbglwAAAAASUVORK5CYII = "width =" 30 "height =" 60 "> <img alt =" 21, A: {5}, B: {5} "title =" 21, A: {5}, B: {5} "src =" data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy + cYDAAAABlBMVEUAAAD /// + l2Z / dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz / ACNgAKkAhD / i5lYAAAAASUVORK5CYII = "width =" 30 "height =" 60 "> <img alt =" 14 , A: {.}, B: {.} "Title =" 14, A: {.}, B: {.} "Src =" data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy + cYDAAAABlBMVEUAAAD /// + l2Z / dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz / AGYgAO8Ah9WahQgAAAAASUVORK5CYII = "width =" 30 "height =" 60 "> <img alt =" 00, A: {gap}, B: {gap} "title =" 00 , A: {space}, B: {space} "src =" data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy + cYDAAAABlBMVEUAAAD /// + l2Z / dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz / ACZgAK8Ah / KrWu0AAAAASUVORK5CYII = "width =" 30 "height =" 60 "> <img alt =" 14, A: {.}, B: "title = {.} "14, A: {.}, B: {.}" Src = "data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy + cYDAAAABlBMVEUAAAD /// + l2Z / dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz / AGYgAO8Ah9WahQgAAAAASUVORK5CYII = "width =" 30 "height =" 60 "> <img width height =" 30 ";:" base64, iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy + cYDAAAABlBMVEUAAAD /// + l2Z / dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz / AF5gAR8Av0A69KoAAAAASUVORK5CYII = image / PNG data "alt =" 64, A: {NUL}, {B }" title=" 64,A:{NUL},B:{ } "src = =" 60 "> <IMG alt = "95, A: {US}, B: {DEL}" title = "95, A: {US}, B: {DEL}" src = "data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy + cYDAAAABlBMVEUAAAD /// + l2Z / dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADKEQVQIHQEDAPz / AELgAWcBIz + IUR4AAAAASUVORK5CYII = "width =" 30 "height =" 60 "> <img alt =" 07, A: { '}, B: {'} "title = "07, A: {'}, B: {'}" src = "data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy + cYDAAAABlBMVEUAAAD /// + l2Z / dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz / AGdgATEAyJ / 9LboAAAAASUVORK5CYII = "width =" 30 "height =" 60 "> <img alt =" 74, A: {LF}, B: {j} "title = "74, A: {LF}, B: {j}" src = "data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy + cYDAAAABlBMVEUAAAD /// + l2Z / dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADKEQVQIHQEDAPz / AHmgAZUBGuCD0Y8AAAAASUVORK5CYII = "width =" 30 "height =" 60 "> <img alt =" 101, A: {FNC 4}, B: {Switch A}, C: {Switch A} "title =" 101, A: {FNC 4}, B: {Switch A}, C: {Switch A} "src =" data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy + cYDAAAABlBMVEUAAAD /// + l2Z / dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz / ABQgAEsANWhuDt4AAAAASUVORK5CYII = "width =" 30 "height =" 60 "> <img alt =" 25, A: {9}, B: {9} "title =" 25 , A: {9}, B: {9} "src =" data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy + cYDAAAABlBMVEUAAAD /// + l2Z / dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz / ABpgAJcAex9glyQAAAAASUVORK5CYII = "width =" 30 "height =" 60 "> <img alt =" 12, A: {,}, B: {,} "title =" 12 , A: {,}, B: {,} "src =" data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy + cYDAAAABlBMVEUAAAD /// + l2Z / dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz / AExgAPsArevKOWsAAAAASUVORK5CYII = "width =" 30 "height =" 60 "> <img alt =" 106 {Stop} "title =" 106 {STOP} "the src =" data: images / PNG; base64, iVBORw0KGgoAAAANSUhEUgAAAA0AAAABAQMAAAA / 57ZEAAAABlBMVEUAAAD /// + l2Z / dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz / ADigARMA2dpJzT8AAAAASUVORK5CYII = "width =" 30 "height =" 60 ">
009821140014649507749

This means the same barcode as your example, but does not require intermediate graphics and takes up about a third of the place. The data used to form the image can be obtained from the array and used to fill the target HTML using Javascript or another application on the client or server side.

You can find a complete list of 128 code characters at http://notionovus.com/blog/code-128-barcode/

I'm not sure about the turn. I have not tried it yet.

Answer 4

To other googlers: the proposed solution does not rely on ReportLab, we can include the barcode in our html template from its base64 representation, since we already have an image created with another library:

 data_uri = open("sample.png", "rb").read().encode("base64").replace("\n", "") # HTML Image Element img_tag = '<img alt="" src="data:image/png;base64,{0}">'.format(data_uri) print img_tag # CSS Background Image css = 'background-image: url(data:image/png;base64,{0});'.format(data_uri) print css 

• from https://gist.github.com/jbergantine/1171682
• https://en.wikipedia.org/wiki/Data_URI_scheme