Hi,

I am trying to print a signature that has been captured in my app. This is running purely in Javascript, I have access to the file location / have been able to use Canvas to get the DataURI, the signature file type is jpg.

I am printing from mobile to a ZEBRA ZQ520 printer and using a Cordova based app.

Using the website http://labelary.com/viewer.html I am able to upload a test signature file and have it spit out something like this:
^FO50,50^GFA,22545,22545,45,,::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::iK06,iJ038,iJ0C,iI07,iH038,iH0E,iG07,i038,hY01C,hY06,hX038,hW03C,hW0E,hV07,hU078,hT03C,hS01C,hS0E,hR07,hQ038,hP01C,hO01E,hO0F,hN07,hM038,hL01E,hK01E,P0C,O01,O02,,:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

(I cut it down for space sake)
If I paste this into my code it prints. But I have been unable to replicate this conversion in Javascript or find a similar method online!

So far my code looks like this:

//This prints the signature and was converted using lable maker
var imageUrl = Geopal.getWorkflowFilePathByName('Signature'); //Gets my signature file path
    function getDataUri(url, callback) {
      var image = new Image();

      image.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
        canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size

        canvas.getContext('2d').drawImage(this, 0, 0);

        // Get raw image data
      callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));
      };
      image.src = imageUrl; //sets the image src to my filepath then calls the onLoad function
    };

    // Usage
    getDataUri(imageUrl, function(dataUri) {
      var raw = atob(dataUri);
     //var raw = btoa(dataUri); // I have tried both

//This gets the Hex value of the DataUri, I don't know if this is relevant to printing?
      var HEX = '';
for (var i = 0; i dataUri.length; i++) {
  HEX += dataUri.charCodeAt(i);
}
      var hexValue = HEX.toUpperCase();
      var byteSize = hexValue.length;
      var imgParam = byteSize / 2;
      console.log(hexValue);

//set the language to ZPL
var setLang = "! U1 setvar \'device.languages\' \'zpl\'\r\n";

//This is where I have hardcoded the uploaded signature file, but would like to put the dynamic signature to be printed
var printCommand = '^XA^POI' +
'^FO50,50^GFA,22545,22545,45,,::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::iK06,iJ038,iJ0C,iI07,iH038,iH0E,iG07,i038,hY01C,hY06,hX038,hW03C,hW0E,hV07,hU078,hT03C,hS01C,hS0E,hR07,hQ038,hP01C,hO01E,hO0F,hN07,hM038,hL01E,hK01E,hK0F,hJ07,hI038,hH03C,hG01E,hG0E,h0F,gY078,gX038,gW01C,gV01E,gV0F,gU07,gM06L078,gM06K078,gM06J078,gM06I078,gM0C0078,gM0E078,gM0C3C,gM0FCN01MFC,gL03EN07EM07KFC,gK03D6L03F8T03KFE,gJ03C14K0FCT03M038,gI03C024I03FV03N06,gH03C002200FCW03N03,gG03CI0243FY03O0C,g03CJ07FCg03O06,Y03CJ07E6gG02O018,X03CI01F84gH02P06,W03CI07E0044gG02P038,V03C001F8I08gH07Q0E,U01E007EK084gG07Q06,T03E03F8L084gG06Q02,S01E0FCM0184gG06Q01,R01E3FO0104gG07Q01,Q01FFCP0104gG06R08,P01FFR0104gG06R0C,O03FCS0204gG06R04,N07FU0204gG0AR06,L01FEV0204gG0AR02,L01CW0404gG0AR01,gK0404gG0AR01,gK0404gG0AS08,:gK0804gG0AS08,:gK0804g012S08,gJ01004g012S08,:gJ01004g012R01,:gJ02004g012R01,:gJ02004g012R02,gJ04004g012R02,:gJ04004g032R02,gJ08004g022R02,gJ08004g026R04,gJ08004g024R04,:gI01I04g024R04,gI01I04g024R0C,gI01I04g028R08,gI02I04g028R08,:gI02I04g038R08,gI02I04g03R01,gI04I04g03R01,:gI04I04g02R01,gI08I04g02R01,gI08I04g02R02,gI08I04g03R02,gH018I04g07R02,gH01J04g05R02,gH01J04g05R04,:gH02J04g09R04,:gH02J04g088Q04,gH04J06Y0108Q08,gH04J02Y0108Q08,:gH04J01Y0108Q08,gH08J01Y0208P018,gH08J01Y0204P01,gH08K08X0204P01,gG01L08X0204P01,gG01L04X0404P01,gG01L04X0404P02,gG03L06X0404P02,gG02L02X0402P02,gG02L02X0802P02,gG06L01X0802P02,gG04L01X0802P04,gG0CM08V01002P04,gG08M08V01002P04,g01N08V01002P04,g01N04V03001P08,g02N04V02001P08,g04N02V04001P08,g04N02V08001P08,g08N03U03I01O018,Y018N01U06I01O03,Y01O01U0CJ08N06,Y02P08S018J08N08,Y06P08S03K08M03,Y04P04S04K08M06,Y08P04S08K08M08,X018P04R03L0CL03,X01Q02R06L06L0E,X02Q03Q018L03K038,X02Q01FCO0EN08I01C,X04S03FCL038N06I07,X08U03F8J0EO03CCF8,X08W07F803Q09FC,W01g07FC,W03,W02,W06,W08,V03,V06,V0C,U01,U02,U04,U08,T03,T06,T0C,S01,S02,S04,S08,R03,R06,R0C,Q01,Q02,Q04,Q08,P03,P06,P0C,O01,O02,,:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::^FS';
var printCommand2 = "^FS^XZ";
var stringtoPrint = GeopalPrint.getPrintString(printCommand); //converts it to hex
stringtoPrint = stringtoPrint.slice(0, -4);//strips the 0D0A from the end
var stringtoPrint2 = GeopalPrint.getPrintString(printCommand2); //converts it to hex
stringtoPrint2 = stringtoPrint2.slice(0, -4);//strips the 0D0A from the end

GeopalPrint.printHex(setLang + stringtoPrint + stringtoPrint2); //send the array buffer of data to the printer to be printed

    });

Any help or advice would be much appreciated as I am going round in circles at this point.

Cheers
Tom