A plugin for jSignature to support image from an url
jSignature Draw signature in the browser
jSignature is a JavaScript widget (a jQuery plugin) that simplifies creation of a signature capture field in a browser window, allowing a user to draw a signature using mouse, pen, or finger. By default it supports data-url-formatted, base64 encoded (likely PNG) bitmap data. Due to this functionality we will need to enable data: for img-src in applications csp setting, which is not a great thing. In this post we will see how to develop an import plugin for jSignature which can support signature data as urls and in turn make csp scrict (img-src 'self';). This post will also help you to extent the inbuilt functionality of jSignature.
$(function () {
var mothership = $.fn['jSignature']
mothership(
'addPlugin'
, 'import'
, 'image-url' // alias
, function (imgUrl, formattype, rerendercallable) {
var img = new Image()
// this = Canvas DOM elem. Not jQuery object. Not Canvas's parent div.
, c = this
img.onload = function () {
var ctx = c.getContext("2d").drawImage(
img, 0, 0
, (img.width < c.width) ? img.width : c.width
, (img.height < c.height) ? img.height : c.height
)
}
img.src = imgUrl
}
)
});
And now we can use the plugins functionality by specifying the alias on importData
let signData = 'https://example.com/getsignature?id=1'
$('#signatureElementId').jSignature('importData', signData, 'image-url')
References:
