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.