need to print an image using javascript through zebra printer

1,770 views
Skip to first unread message

bhargav venkatesh

unread,
Sep 22, 2018, 8:41:28 AM9/22/18
to qz-print

Hi

we are developing a desktop based real time application using php and javascript where we take the details of a particular person and print the image of the person. When i tried to print the image of the person it prints the black box. I even used the javascript api's like eb.printer, eb.printerzebra, ebapi and ebapi-modules.

I want to use the zebra driver not the windows driver. So when the i click the print button it should print through the zebra printer without showing the preview of the print sheet as the windows driver

 

 

//this the code of Devdemo.js

var available_printers = null;

var selected_category = null;

var default_printer = null;

var selected_printer = null;

var format_start = "^XA^LL200^FO80,50^A0N36,36^FD";

var format_end = "^FS^XZ";

var default_mode = true;

 

 

function setup_web_print()

{

$('#printer_select').on('change', onPrinterSelected);

showLoading("Loading Printer Information...");

default_mode = true;

selected_printer = null;

available_printers = null;

selected_category = null;

default_printer = null;

 

BrowserPrint.getDefaultDevice('printer', function(printer)

{

default_printer = printer

if((printer != null) && (printer.connection != undefined))

{

selected_printer = printer;

var printer_details = $('#printer_details');

var selected_printer_div = $('#selected_printer');

 

selected_printer_div.text("Using Default Printer: " + printer.name);

hideLoading();

printer_details.show();

$('#print_form').show();

 

 

}

BrowserPrint.getLocalDevices(function(printers)

{

available_printers = printers;

var sel = document.getElementById("printers");

var printers_available = false;

sel.innerHTML = "";

if (printers != undefined)

{

for(var i = 0; i < printers.length; i++)

{

if (printers[i].connection == 'usb')

{

var opt = document.createElement("option");

opt.innerHTML = printers[i].connection + ": " + printers[i].uid;

opt.value = printers[i].uid;

sel.appendChild(opt);

printers_available = true;

}

}

}

 

if(!printers_available)

{

showErrorMessage("No Zebra Printers could be found!");

hideLoading();

$('#print_form').hide();

return;

}

else if(selected_printer == null)

{

default_mode = false;

changePrinter();

$('#print_form').show();

hideLoading();

}

}, undefined, 'printer');

},

function(error_response)

{

showBrowserPrintNotFound();

});

};

 

function showBrowserPrintNotFound()

{

showErrorMessage("An error occured while attempting to connect to your Zebra Printer. You may not have Zebra Browser Print installed, or it may not be running. Install Zebra Browser Print, or start the Zebra Browser Print Service, and try again.");

};

 

function sendData(photoURL)

{

 

var test;

$.ajax({

            url: 'db/zpl.php?photo='+photoURL,

            cache: false,

            contentType: false,

            processData: false,

            type: 'GET',

            success: function(data) {

            test=data;

            console.log("From ZPL:"+data);

            }

        });

 

var mob="",lap="",other="";

if($("#emobile").val()==="on"){

mob="Mobile";

}

 

if($("#elaptop").val()==="on"){

lap="Laptop";

}

    if($("#eother").val()==="on"){

other="Other";

}

showLoading("Printing...");

checkPrinterStatus( function (text){

if (text == "Ready to Print")

{

 

selected_printer.send("^XA N ^XZ");

// selected_printer.send("^XA~DGE:ZLOGO.GRF,2580,030,"+test+"^XZ");

 

selected_printer.send("~DYE:SAMPLE,A,GRF,5000,030"+test+",A");

 

 

//selected_printer.send("^XA^BY2^FO165,13^BCN,49,N,N,N^SN00095C00001,1,Y^FS^A0N,28,28^FO490,47^FD17/10/2017^FS^A0N,26,24^FO157,162^FDCOLGATE GYE^FS^A0N,26,24^FO499,13^FDFEC.EMIS^FS^A0N,66,60^FO157,90^SN00099C00001,1,Y^FS^FO150,180^XGE:SAMPLE.GRF,1,1^FS^PQ1,1,1,y^FS^XZ");

 

// selected_printer.send("^XA^FO100,100^IMR:SAMPLE.GRF^FS^FO100,200^IMR:SAMPLE.GRF^FS^FO100,300^IMR:SAMPLE.GRF^FS^FO100,400^IMR:SAMPLE.GRF^FS^FO100,500^IMR:SAMPLE.GRF^FS^XZ");

//this is the function where i am passing to the printer

selected_printer.send("^XA^FX Second section with recipient address and permit information. ^CFA,30 ^FO50,50^FDVisitor Name:"+$("#user").val()+"^FS ^FO50,80^FDCompany:"+$("#compName").val()+"^FS  ^FO50,110^FDTo Meet:"+$("#toMeet").val()+"^FS ^FO50,150^FDPurpose:"+$("#reason").val()+"^FS ^FO50,190^FDAuthorise^FS ^FO50,220^FDto Carry:"+mob+" "+lap+"^FS ^FO500,50^XGR:SAMPLE.GRF,1,1^FS^XZ");

 

 

//selected_printer.send("^XA ^FX Second section with recipient address and permit information. ^CFA,30 ^FO50,30^FDJohn Doe^FS ^FO50,70^FD100 Main Street^FS ^FO50,110^FDSpringfield TN 39021^FS ^FO50,150^FDUnited States (USA)^FS ^XZ");

}

else

{

printerError(text);

}

});

};

function checkPrinterStatus(finishedFunction)

{

selected_printer.sendThenRead("~HQES",

function(text){

var that = this;

var statuses = new Array();

var ok = false;

var is_error = text.charAt(70);

var media = text.charAt(88);

var head = text.charAt(87);

var pause = text.charAt(84);

// check each flag that prevents printing

if (is_error == '0')

{

ok = true;

statuses.push("Ready to Print");

}

if (media == '1')

statuses.push("Paper out");

if (media == '2')

statuses.push("Ribbon Out");

if (media == '4')

statuses.push("Media Door Open");

if (media == '8')

statuses.push("Cutter Fault");

if (head == '1')

statuses.push("Printhead Overheating");

if (head == '2')

statuses.push("Motor Overheating");

if (head == '4')

statuses.push("Printhead Fault");

if (head == '8')

statuses.push("Incorrect Printhead");

if (pause == '1')

statuses.push("Printer Paused");

if ((!ok) && (statuses.Count == 0))

statuses.push("Error: Unknown Error");

finishedFunction(statuses.join());

}, printerError);

};

function hidePrintForm()

{

$('#print_form').hide();

};

function showPrintForm()

{

$('#print_form').show();

};

function showLoading(text)

{

$('#loading_message').text(text);

$('#printer_data_loading').show();

hidePrintForm();

$('#printer_details').hide();

$('#printer_select').hide();

};

function printComplete()

{

hideLoading();

alert ("Printing complete");

}

function hideLoading()

{

$('#printer_data_loading').hide();

if(default_mode == true)

{

showPrintForm();

$('#printer_details').show();

}

else

{

$('#printer_select').show();

showPrintForm();

}

};

function changePrinter()

{

default_mode = false;

selected_printer = null;

$('#printer_details').hide();

if(available_printers == null)

{

showLoading("Finding Printers...");

$('#print_form').hide();

setTimeout(changePrinter, 200);

return;

}

$('#printer_select').show();

onPrinterSelected();

}

 

 

function onPrinterSelected()

{

selected_printer = available_printers[$('#printers')[0].selectedIndex];

}

 

 

function showErrorMessage(text)

{

$('#main').hide();

$('#error_div').show();

$('#error_message').html(text);

}

 

 

function printerError(text)

{

showErrorMessage("An error occurred while printing. Please try again." + text);

}

 

 

function trySetupAgain()

{

$('#main').show();

$('#error_div').hide();

setup_web_print();

//hideLoading();

}

 

// i am converting the image from png to grf using this code

 

 

<?php

/**

* Converts a PNG image to a .GRF file for use with Zebra printers

*

* The input is preferably a 1-bit black/white image but RGB images

* are accepted as well.

*

* This function uses PHP's GD library image functions.

*

* @copyright Thomas Bruederli <in...@brotherli.ch>

*

* @param string $filename Path to the input file

* @param string $targetname Name of the GRF file reference

* @return string ZPL command for uploading the graphic image (~DG)

*/

function image2grf($filename, $targetname = 'R:SAMPLE.GRF')

{

  $info = getimagesize($filename);

  $im = imagecreatefrompng($filename);

  $width = $info[0]; // imagesx($im);

  $height = $info[1]; // imagesy($im);

  $depth = $info['bits'] ?: 1;

  $threshold = $depth > 1 ? 160 : 0;

  $hexString = '';

  $byteShift = 7;

  $currentByte = 0;

  // iterate over all image pixels

  for ($y = 0; $y < $height; $y++) {

    for ($x = 0; $x < $width; $x++) {

      $color = imagecolorat($im, $x, $y);

      // compute gray value from RGB color

      if ($depth > 1) {

        $value = max($color >> 16, $color >> 8 & 255, $color & 255);

      } else {

        $value = $color;

      }

      // set (inverse) bit for the current pixel

      $currentByte |= (($value > $threshold ? 0 : 1) << $byteShift);

      $byteShift--;

      // 8 pixels filled one byte => append to output as hex

      if ($byteShift < 0) {

        $hexString .= sprintf('%02X', $currentByte);

        $currentByte = 0;

        $byteShift = 7;

      }

    }

    // append last byte at end of row

    if ($byteShift < 7) {

      $hexString .= sprintf('%02X', $currentByte);

      $currentByte = 0;

      $byteShift = 7;

    }

    $hexString .= PHP_EOL;

  }

  // compose ZPL ~DG command

  $totalBytes = ceil(($width * $height) / 8);

  $bytesPerRow = ceil($width / 8);

  return sprintf('~DG%s,%05d,%03d,' . PHP_EOL, $targetname, $totalBytes, $bytesPerRow) . $hexString;

}

// Usage:

print image2grf('HD.png', 'R:SAMPLE.GRF');

// print "^XA^FO20,20^XGR:SAMPLE.GRF,1,1^FS^XZ" . PHP_EOL;

 

 

please look at the code and provide the solution

Thanks in advance...

Tres Finocchiaro

unread,
Sep 22, 2018, 1:09:00 PM9/22/18
to bhargavven...@gmail.com, qz-print
Are you using QZ Tray?  That's the mailing list you're on.

We can do it.  Snippet's here: https://qz.io/wiki/2.0-Raw-Printing#zpl

Just download the software, load the "sample.html" from the demo's folder and click the "ZPL" button.


--
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.
Reply all
Reply to author
Forward
0 new messages