Expected behaviour: call iframePanel.Call(“obtenerFirma”, callback, null) where obtenerFirma is the name of the function to excecute in the javascript file and a callback function into which it should pass the return value as a parameter. The Javascript function reads from a canvas element in the iframe and returns a bytearray so I can handle it serverside.
Actual behaviour: Getting a StackOverflowException in mscorlib.dll!System.IO.LongPathHelper.GetFullPathName(string path, System.Runtime.InteropServices.StringBuffer fullPath), which for what I understand is out of my control.
Code snippets below:
iframe’s inner html:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>
body{
background-color: beige;
}
canvas{
}
#mainDiv {
width: 100%;
height: auto;
}
</style>
<title>Firma</title>
</head>
<body>
<div id=”da”>
<div id=”mainDiv”>
<canvas width=”334″ height=”194″ id=”canvas”>
</canvas>
<button style=”height: 1px; width: 1px; visibility: hidden;” id=”boton-limpiar” onclick={reset()}></button>
</div>
</div>
</body>
<script>
// Simple draw component made in vanilla JavaScript
let state = {
mode: ‘draw’,
pen: ‘up’,
penCoords: [0, 0]
}
let ctx = null;
let isMouseDown = false;
const canvas = document.getElementById(‘canvas’);
const maindiv = document.getElementById(‘mainDiv’);
const main = () => {
canvas.addEventListener(‘mousemove’, drawing);
canvas.addEventListener(‘mousedown’, penDown);
document.addEventListener(‘mouseup’, penUp);
reset();
document.getElementById(‘da’).appendChild(maindiv);
}
function draw() {
state.mode = ‘draw’;
}
function drawing(e) {
if (state.pen === ‘down’) {
ctx.beginPath();
ctx.lineWidth = 3;
ctx.lineCap = ’round’;
if (state.mode === ‘draw’) {
ctx.strokeStyle = state.penColor;
}
ctx.moveTo(state.penCoords[0], state.penCoords[1]);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
state.penCoords = [e.offsetX, e.offsetY];
}
}
function penDown(e) {
state.pen = ‘down’;
state.penCoords = [e.offsetX, e.offsetY];
isMouseDown = true;
}
function penUp() {
state.pen = ‘up’;
isMouseDown = false;
}
function penIn(){
if(!isMouseDown) state.pen = ‘up’;
}
function reset() {
state = {
mode: ‘draw’,
pen: ‘up’,
penCoords: [0, 0]
};
isMouseDown = false;
ctx = canvas.getContext(‘2d’);
ctx.fillStyle = ‘white’;
ctx.penCoords = [0,0];
ctx.fillRect(0, 0, 334, 194);
}
main();
</script>
</html>
Script.js
this.obtenerFirma = function () {
const iframe = document.getElementsByTagName(‘iframe’)[0];
const canvas = iframe.contentDocument.getElementsByTagName(‘canvas’)[0];
const context = canvas.getContext(‘2d’);
const imageData = context.getImageData(0, 0, canvas.clientWidth, canvas.clientHeight);
return imageData.data;
}
Wisej component’s handler function (Panel2 is a panel used as a button)
using System;
using Wisej.Web;
namespace check_in.Componentes.CheckInPage
{
public partial class ControlFirma : Wisej.Web.UserControl
{
public ControlFirma()
{
InitializeComponent();
}
private void panel2_Clicked(object sender, EventArgs e)
{
iFramePanel1.Call(“reiniciar”, null);
}
private Action<byte[]> callback;
private void pictureBox2_Click(object sender, EventArgs e)
{
callback = new Action<byte[]>(guardarValor);
iFramePanel1.Call(“obtenerFirma”, callback, null);
}
private void guardarValor(byte[] firma)
{
Console.WriteLine(firma);
}
}
}
Found the problem.
IframePanel.Call requires a callback of type Action<dynamic>, it was my mistake. Closing the issue
