Hi
We are trying to implement a signature control in our transition from VWG to WiseJ.
I used the article https://wisej.com/blog/integration2/ as reference. We are saving the signature string in a database after the signature is captured.
The property “Data” in the below code will have the signature string. Is there a way that we can use saved signature string to load the signature back in the control when the form is loaded.
thanks
praveena
public SignatureControl()
{
InitializeComponent();
widget1.BorderStyle = Wisej.Web.BorderStyle.Solid;
widget1.InitScript = $@”this.init = function()
{{
var me = this;
$(this.container).ejSignature
({{
strokeWidth: 3,
isResponsive: true,
width: this.getWidth() + “”px””,
height: this.getHeight() + “”px””,
change: function(e) {{
me.fireWidgetEvent(“”change””, {{lastImage: e.lastImage}});
}}
}});
}}”;
}
private void widget1_WidgetEvent(object sender, WidgetEventArgs e)
{
switch (e.Type)
{
case “change”:
OnSignatureChanged(e.Data.lastImage);
break;
}
}
public string Data
{
get;set;
}
private void OnSignatureChanged(string imageData)
{
//this.pictureBox1.Image = ImageFromBase64(imageData);
Data = imageData.Split(‘,’)[1];
}
Thanks
Praveena
See attached fixed sample.
You cannot call a method on a third party widget when the container is created because the browser loads the javascript libraries asynchronously. In Wisej 2.x there is a Loaded event on the Widget. In any case, it’s enough to fire an event in init() and then check in the javascript function if the widget is initialized and if not, resubmit the call when the event fires.
Hi Luca
I modified the project eSigantureSample and attaching it here.
If I call the SetSignature() method from the button_click event, it works fine.
But if I call the method from the main after the form is loaded, you can see the error I mentioned. I just did to mimic the scenario in my environment where the controls are populated after the form is loaded.
Thanks
Praveena
Hi Luca
Below is the code that i have so far. The “SetSignature” method is called after the form and controls are loaded and when the control data is getting populated from the saved properties. So the base64 string will be passed as a parameter to this method.
I can see the log message “in apply signature” in the console. And then it gives the attached error.
public SignatureControl()
{
InitializeComponent();
AllowDrag = false;
Movable = false;
this.AppearanceKey = “fixed-window”;
widget1.BorderStyle = Wisej.Web.BorderStyle.Solid;
widget1.InitScript = $@”this.init = function()
{{
var me = this;
console.log(“”inside init””);
$(this.container).ejSignature
({{
strokeWidth: 3,
isResponsive: true,
width: this.getWidth() + “”px””,
height: this.getHeight() + “”px””,
change: function(e) {{
me.fireWidgetEvent(“”change””, {{lastImage: e.lastImage}});
}}
}});
}}
this.loadSignature = function(data)
{{
var me = this;
console.log(“”in apply siganture””);
var obj = $(this.container).ejSignature(“”instance””); // Create object for signature control
console.log(“”after obj””);
canvas = obj._canvas[0];
context = canvas.getContext(“”2d””);
var img = new Image;
img.src = data; //specify image source
context.clearRect(0, 0, canvas.width, canvas.height); // Clear specified pixel
img.onload = function() {{
context.drawImage(img, 0, 0);
}}
console.log(“”after obj””);
}}”;
}
public void SetSignature(string imageData)
{
this.widget1.Call(“loadSignature”, imageData);
}
private void widget1_WidgetEvent(object sender, WidgetEventArgs e)
{
switch (e.Type)
{
case “change”:
OnSignatureChanged(e.Data.lastImage);
break;
}
}
public string Data { get; set; }
private void OnSignatureChanged(string imageData)
{
Data = imageData?.Split(‘,’)[1];
}
Thanks
Praveena
Hi Paul
Thank you for the update. But if the form and the control is already loaded, then calling the method in InitScript gives error “$ is not defined”. Any suggestions on how can this be fixed.
thanks
praveena
Hi Praveena
You could follow the directions in this link: https://help.syncfusion.com/js/signature/how-to#pre-load-signature-image
You can add another method in the InitScript (i.e. applySignature) that takes the URL of the image as an argument.
Then just use this.widget1.Call(“applySignature”, “some/url/.png”)
HTH
Regards
Please login first to submit.