python - Reportlab 的 Code128 条码作为 HTML 图像标记与 Python 中的数据 URI 方案

Question

我需要用 Python/Django 创建一个 Code128 条形码，它必须嵌入 HTML 文档中。

我不想在磁盘上创建任何临时（或缓存）文件。这就是为什么我想将它们嵌入为数据 URI 方案。

结果必须是这样的：

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

你能给我推荐一个简单的方法吗？

现在我使用 ReportLab 创建这样的条形码并将它们嵌入 PDF 文件中，但我不知道如何将它们导出为 Data URI Scheme。如果这是推荐的方法。

Answer 1

这是我自己的解决方案：

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)

您还可以将条形码旋转 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

这是一个示例结果：

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

Answer 2

这应该可以解决问题。我使用Code128 python 模块来生成条形码。

代码

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)

输出

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

更新

评论中有一个很好的建议来修改 Code128 模块，这样它就不必将图像保存到文件系统。您可以更改 Code128 以便它返回图像对象而不是将其保存到文件中。您只需要更改一行代码即可实现此目的。将第 162 行从：

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

到：

return im

Answer 3

您是否尝试过使用自己的图像数据表示的每个符号即时组装条形码？这是一个例子：

<img alt="105,{开始 C}" title="105,{开始 C}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ACxgALsAjaIIjKmKzk=" 30" height="60"><img alt=" 00,A:{space},B:{space}" title=" 00,A:{space},B:{space}" src="data:image /png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ACZgAK8Ah/KrWu0AAAASUVORK5CYII="width="30" height="60"><img alt="98,A:{Escape:{ A}" title=" 98,A:{Escape B},B:{Escape A}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AAugALkArBSbglwAAAAASUVORK5CYII="width="30" height="60"><img alt="21,A:{5},B:{5}" :{5},B:{5}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ACNgAKkAhD/i5lYAAAAAASUVORK5CYII="width="height="633 img alt="14,A:{.},B:{.}" title="14,A:{.},B:{.}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD/ //+l2Z/dAAAACXBIWXMAAA7EAAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AGYgAO8Ah9WahQgAAAASUVORK5CYII="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/dAAAACXBIWXMAAA7EAAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ACZgAKORK8Ah/KrWu0AAAAAAII宽度"30" height="60"><img alt=" 14,A:{.},B:{.}" title=" 14,A:{.},B:{.}" src="data: image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AGYgAO8Ah9WahQgAAAAAASUVORK5CYII="width="30" height="60"><img alt="64,A:{width="30" height="60"><img alt=" 14,A:{.},B:{.}" title=" 14,A:{.},B:{.}" src="数据：image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AGYgAO8Ah9WahQgAAAAAASUVORK5CYII="width="30" height="60"><img alt="64,width="30" height="60"><img alt=" 14,A:{.},B:{.}" title=" 14,A:{.},B:{.}" src="数据：image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AGYgAO8Ah9WahQgAAAAAASUVORK5CYII="width="30" height="60"><img alt="64,}" title=" 64,A:{NUL},B:{}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AF5gAR8Av0A69KoAAAASUVORK5CYII="width="30"95height="60"><im}g ,B:{DEL}" title=" 95,A:{US},B:{DEL}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AELgAWACIIBIz+IURAK " width="30" height="60"><img alt=" 07,A:{'},B:{'}" title=" 07,A:{'},B:{'}" src= "数据:图像/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AGdgATEAyJ/9LboAAAAAASUVORK5CYII="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/dAAAACXBIWXMAAA7EAAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AHmgAZUBGuCD0Y8AAAAASUVORK5CYII="width="30" height="60"><img alt="101,A,A:{FNC 4} :{Switch A}" title="101,A:{FNC 4},B:{Switch A},C:{Switch A}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+ l2Z/dAAAACXBIWXMAAA7EAAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ABQgAEsANWhuDt4AAAAAASUVORK5CYII="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/dAAAACXBIWXMAAA7EAAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ABpgAJcAex9glyQAAAAASUVORK5CYII="width="30" height="60"><img alt="12,A:{2,},B:{,} :{,},B:{,}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAABAQMAAAAy+cYDAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/AExgAPsArevKOWsAAAASUVORK5CYII width="30" height ="106,{Stop}"title="106,{Stop}"src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAABAQMAAAA/57ZEAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAAOxAGVKw4bAAAADklEQVQIHQEDAPz/ADigARMA2dpJzT8AAAAAASUVORK="宽度60">
009821140014649507749

这表示与您的示例相同的条形码，但不需要中间图形并占用大约三分之一的空间。用于构成图像的数据可以从数组中访问，并用于使用 Javascript 或其他客户端或服务器端应用程序填充目标 HTML。

您可以在http://notionovus.com/blog/code-128-barcode/找到 Code 128 符号的完整列表

我不确定旋转。我还没有尝试过。

Answer 4

对于其他 googlers：建议的解决方案不依赖于 ReportLab，我们可以在我们的 html 模板中包含来自其 base64 表示的条形码，因为我们已经使用另一个库创建了图像：

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

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