Printing Base64 Encoded Image to Raw Printer

[Andrew Monty]

I'm having trouble getting QZ 2.0 to print properly on a Zebra GK420d using raw drivers.

I've tried using type: image, format: base64, which does print a fairly accurate label, however there seem to be dithering issues or something, and many times barcodes are un-scannable, or small text unreadable. The first attachment shows an example of that.

I was hoping Raw printing might solve the issue. The method I'm trying now is from the Raw Printing ZPL instructions in the code demos: https://qz.io/wiki/2.0-raw-printing#zpl

However, instead of sending the url of an image, I want to send a base64 encoded image.

var data = [  '^XA\n',
  {
    type: 'raw',
    format: 'image',
    data: printJob.image,
    options: { language: "ZPL" }
  },
  '^FS\n',
  ^XZ\n'

];

The first problem is that my printJob.image (the base64 encoded image) gets converted to a URL by this section of qz-tray.js

print: function(config, data, signature, signingTimestamp) {
  //change relative links to absolute
  for(var i = 0; i < data.length; i++) {
    if (typeof data[i] === 'object') {
      if ((!data[i].format && data[i].type.toUpperCase() !== 'RAW') //unspecified format and not raw -> assume file
        || (data[i].format && (data[i].format.toUpperCase() === 'FILE'
        || data[i].format.toUpperCase() === 'IMAGE'
        || data[i].format.toUpperCase() === 'XML'))) {
          data[i].data = _qz.tools.absolute(data[i].data);
      }
    }
  }

Which causes a "cannot parse" message in the QZ Tray logs. If I comment out the data[i].data = _qz.tools.absolute(data[i].data); then I actually get a label to print, but it's very skewed (see second attachment).

I'm sure there must be something I'm doing wrong, but I've been going crazy trying to get it to work. Any help would be appreciated!

[Tres Finocchiaro]

there seem to be dithering issues or something, and many times barcodes are un-scannable, or small text unreadable. The first attachment shows an example of that.

I'm sure you've tried this but if you're using Pixel printing and if you're up-scaling, I recommend nearest-neighbor scaling on low-dpi thermal printers.

 

 I want to send a base64 encoded [raw] image.

I think this is a bug.  We'll track it here: https://github.com/qzind/tray/issues/70 

If I comment out the data[i].data = _qz.tools.absolute(data[i].data); then I actually get a label to print, but it's very skewed (see second attachment).

Assuming you temporarily keep the code workaround in place, can you also try to make the image smaller and divisible by 8?  If that doesn't work, please email a copy of it and we'll reproduce on our ZPL printer.

[Andrew Monty]

Thanks for the quick reply!

Making the image dimensions divisble by 8 did fix the skewing problem, but now I can't get it centered on the label. Previously I was setting the image dimensions to be inches * 203 (the Zebra printer dpi) which gave a pretty accurately placed image. Setting the dimensions to inches * 200 (close to the same DPI but divisible by 8) now the image is much cleaner, but the left side of it is cut off:

Here is the base64 of the image being passed into the data array:

data:image/png;base64,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AAExYcMJAhCAAAQQEPoABCAAAQiYCCAgJmw4ffjhh+6dd95xyy23nBnGK6+84l566SX38ssvR3/ff/+9m2WWWdyss84a/S2//PJulFFGMdevOp966in32muvRX8//fSTm3766d0MM8zgZpxxRrf66qu7Mccc01x/luOjjz7qnnvuuZrLyy67rJtzzjmD7nX77be7t99+O6hsstA888zjllpqKZOvnH755Rf3/vvvd/1999137ogjjjDXh2PfJoCA9O33W+jTaXC57rrr3OWXX+4eeught+6667prr7029z0+/vhjt9NOO7nbbrutrq8G+bPOOssNGDAg1z1U/6BBg9xVV11V12/iiSd2Bx98sNt+++1dv379ct0jq/DXX38did+3335bU0TPsfPOOwfdY+mll3YPP/xwUNlkod12280NHjw4l+8///zjhg4d6k466aRI0H0bd9xxI2HHIJBGAAGhX9Ql8N9//7kHHnjAXXbZZe7GG290v/76a1f5gQMH5haQM8880x144IHRL91Q23zzzd0ll1ziOjo6GrpI3HbccUf322+/NSwbF5htttnck08+6cYee+xgn6yCm2yyiRsyZEi3y3kERMKp2Z3F8ghIZ2enO/vss93JJ5/sNKNMMwTE8hbaxwcBaZ93netJ33jjjUg0rrzySvfJJ5+k+uYVENW16aab5mpHXPjcc8+NZgr1TMtGiy22mPvzzz9Ti4088sju77//Tr224YYbNpyxNGr4XXfd5VZeeeXUYnkEZPTRR3e///57o9ulXg8VkH///ddttdVW0WyyniEgptfQNk4ISNu86sYPqj2CK664IhpUnn766YYOeQTk888/d/379++2HKLZxRZbbBHtfWiAf+GFF9xRRx3VbQlHexXa05hmmmlS2/Xjjz+6eeed17333ns11xdffHF35JFHuvnmmy/a79AvbS3DaV3fn03JSYK52WabNXzutAKqS8+X9Us+VEC05zDBBBPU3GL++ed3Y401VlC71llnnYZLZVqy0kzpmmuuyZx1aBlOMzPt20iUMAikEUBA6BddBG655Ra3xhprBBNZb731MgehZCVrr712tATm28UXX+y23HLLbvfT0ooGuOQexkEHHeSOPvro1Pap7MYbb1xzTZvkN998c2p5LcslAwA0e7jjjjuCn98vuNdee7nTTjst0zdUQLQHMddcc9XUo+Usbf4XZVri04wuaQpa0BKjxByDQAgBBCSEUpuUyRIQrclrtnHsscfWkAgVEC0b6df/X3/91eWvmYGilbLsq6++ctNOO23NXsZqq63m1MY023333d0ZZ5xRc0mznkknnTTzHiussIK77777uq5PNtlk7rPPPsv9tp955hm38MILO+0XyUYccUSnJSLfQgXkzjvvdKusskqNr5azRh111NztSnNQ5JsEKm6rymjGc+qpp5pnX4U0jEp6JQEEpFe+tnIa7QvI+OOP79Zff/1oUNHgqE3pMcYYwyQgL774opt77rlrfM855xy3ww471H2QRRddNNrcjm3qqad2H3zwQaqP9j4UshublroabUTvu+++0Qayb1988YWbZJJJggFrOUjLY3700rbbbusuuOCCmjq0Wa3Is0Ymv+22266rmAb3b775ppFb8HWJk0QqNgUm3H///W6ZZZYJroOCEOjqP51aL8Ag4JzTJvB5550Xicaqq65aE9rajIBceuml3Zaq7rnnHqcZQD3TkpS/jKVf4dbN5bT7aDnskEMOqbmkPZjkElK9Nh533HFRVFlsWhZTaHByQA4VkMMPP7zm3IXaojYVYY8//rjTzM83id35559fRPXU0YYEmIG04Uu3PHIzAvLpp592i+SaY445nKKN6pkO3z344INdRbShq9lMUZYWcqtAgtANax32U5v++OOPqEmjjTZatNGvqDWd5fAtVEC22WYbd9FFF3W5asagg4VFWHLGpVmmgg7GGWecIqqnjjYkgIC04Uu3PHIzAmK5n6KRppxyypoZx0YbbZR6xsJSv/ZHFGX0ww8/dLlr1qDN9VBLCtyJJ57oNEjrEKBVQLSRr5lgbFrO0sb2vffe6xRarWU5LSVqSVCzkzh6LaTN8vEFWIEN119/fRT2rGADLW1piVD7I5NPPnl0ol37XBIaDAJpBBAQ+kUQgZ4WEIXyHnrooTVt0wC30korBbW3XiGJh2YfSbEIWVaL69UsQbOF2JRCRKHPI400UlMCopmZNrpj039/+eWXTkEFaTbRRBO5Cy+8MErLUs90Ql57O/6K9SmnnBKldFFUlmaJaabZicJ9V1xxxaa5U0HfI4CA9L13WsoT9aSAvPrqq9HGtH8gUP/97LPP5no27ZfEyz8aOD/66KPoV7wGxJ9//rmmLolVaM4nDeg6JxGn+FDUlcRD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

[Tres Finocchiaro]

I believe you need to set the field origin using raw ZPL prior to appending to center it.

Furthermore, if you're ok with it, these printers have direct barcoding capabilities eliminating the need for the base64 data completely.

Here's a fantastic online viewer which illustrates the barcode capabilities of ZPL printers, including the Field Origin code snippet.

http://labelary.com/viewer.html

- Tres.Fin...@gmail.com

--
You received this message because you are subscribed to the Google Groups "qz-print" group.
To unsubscribe from this group and stop receiving emails from it, send an email to qz-print+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Andrew Monty]

I'll look into the commands for setting origin, thanks.

Direct barcoding would probably be the best solution quality wise. The reason we're sending a base 64 image is because our application lets the users design their labels themselves, by placing barcodes, text, and images on an HTML canvas which is then rendered and sent to the printer.

Thanks for all your help.

[Tres Finocchiaro]

The reason we're sending a base 64 image is because our application lets the users design their labels themselves, by placing barcodes, text, and images on an HTML canvas which is then rendered and sent to the printer.

Understood. We have this filed as a bug and should be able to get it patched for the 2.0.1 release.

-Tres 

- Tres.Fin...@gmail.com