1

i am trying to create an inline field in my suitelet to have an e sign canvas and than download my canvas image(signature) but every time the pictures gets downloaded but when i open it in image viewer it gives error.(error: It appears that we dont support this file format) Although the format is tried to download is .png and.jpg

And when i check downloading in my mobile(after opening netsuite in mob browser), the link is downloading the whole page, not the image.

My code is as follows:

function signSuitelet(request, response) {
if (request.getMethod() == 'GET') {
    var nsForm = nlapiCreatensForm('signature page');
    var signVar = '<html>'
    signVar += '<head>'
    signVar += '<meta charset="utf-8" />'
    signVar += '<title>eSignature Page</title>'
    signVar += '<script src="https://3455378.app.netsuite.com/core/media/media.nl?id=1936630&c=3455378&h=3YZfTqqol-Icyoxmcikk2wmMfmX3VWk-1HDzId8H8voUFsWv&_xt=.js"></script>'
    signVar += '</head>'
    signVar += '<body>'
    signVar += '<div class="wrapper" style="position: relative; width: 400px; height: 200px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;  user-select: none;">';
    signVar += '<canvas id="signpad" class="signpad" width=400 height=200 style="position: absolute; left: 0; top: 0; width:400px; height:200px; background-color: rgb(242, 242, 242);"></canvas>'
    signVar += '</div>'

    signVar += '<p></p>'
    signVar += '<a id="download" download="signImage.jpg" href="" onclick="download_img(canvas);">Download to signImage.jpg</a>'
    //script
    signVar += '<script>'
    signVar += 'var canvas = document.getElementById("signpad");'
    signVar += 'function resizeCanvas(canvas){'
    signVar += 'var ratio = Math.max(window.devicePixelRatio || 0, 0);'
    signVar += 'canvas.width = canvas.offsetWidth * ratio;'
    signVar += 'canvas.height = canvas.offsetHeight * ratio;'
    signVar += 'canvas.getContext("2d").scale(ratio, ratio);'
    signVar += '}'
    signVar += 'window.onresize = resizeCanvas;'
    signVar += 'resizeCanvas(canvas);'
    signVar += 'var signaturePad = new SignaturePad(canvas)//const signaturePad = new SignaturePad(canvas)';
    signVar += 'download_img = function(el){'
    // get image URI from canvas object
    signVar += 'var imageURI = canvas.toDataURL("image/jpg");'
    signVar += 'el.href = imageURI;'
    signVar += '};'
    signVar += '</script>'
    signVar += '</body>'
    signVar += '</html>'

    var inLineField = nsForm.addField('custpage_signfield', 'inlinehtml', 'signature field');
    inLineField.setDefaultValue(signVar);
    response.writePage(nsForm);
}

}

Can anyone help me to get the bug and assist me to resolve this please.

4N335
  • 267
  • 2
  • 29

1 Answers1

0

onclick="download_img( this );"

Edit:

Your other problem is the lack of new lines. Results without new line character

If you had inspected the console after clicking your link, you would have seen download_img is not defined

so, you can either add new line characters or use /**/ comment syntax and ; to end every line.

Nathan Sutherland
  • 1,191
  • 7
  • 9