汉王手写签批控件如何在谷歌、火狐、Edge等浏览器使用

背景

        近日,有网友咨询汉王手写签批控件是否可以通过allWebPlugin中间件技术加载到谷歌、火狐、Edge等浏览器?为此,笔者详细了解了一下汉王手写签批控件,它是一个标准的ActiveX控件,曾经主要在IE浏览器使用,由于微软禁用IE浏览器,导致汉王手写签批控件无法使用。因此,网友希望能在谷歌、火狐、Edge等浏览器上使用这个控件。

        allWebPlugin中间件是一款为用户提供安全、可靠、便捷的浏览器插件服务的中间件产品致力于将浏览器插件重新应用到所有浏览器。它不仅可以实现ActiveX控件在现代浏览器上使用,而且集成也非常方便。

准备工作

1、下载allWebPlugin中间件产品,具体如下:

链接:百度网盘 请输入提取码 
提取码:z3q0 

如下图所示,下载allWebPlugin_x86_v2.0.0.20_alpha_演示包_20240908.zip安装包。

安装包截图

​​2、下载汉王手写签批控件,笔者百度网盘放了一份汉王手写签批控件demo实例。具体如下:

链接:百度网盘 请输入提取码 
提取码:z3q0 

如下图所示,下载ESP370ocx正式版-20150515.zip安装包。

下载以上内容,并安装。

汉王手写签批控件demo展示

下面将展示汉王手写签批控件demo html源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>汉王手写签批测试页面</title>
    <style type="text/css">
        .style1
        {
            font-size: xx-large;
            font-family: 宋体, Arial, Helvetica, sans-serif;
            color: #FF3399;
        }
       .style2
        {
            font-size: 16px;
            font-family: 宋体, Arial, Helvetica, sans-serif;
            color: #FF3399;
        }
       .style3
        {
            font-size: 12px;
            font-family: 宋体, Arial, Helvetica, sans-serif;
            color: #000000;
        }
		.style4
        {
            font-size: 12px;
            font-family: 宋体, Arial, Helvetica, sans-serif;
            color: #FF0000;
        }
   </style>
   
<script language="javascript" type="text/javascript">

 penwidth = 3;
 var obj;

window.onload = function(){   
                  obj = document.getElementById("HWPenSign"); 
                  obj.HWSetBkColor(0xE0F8E0);  
		  obj.HWSetCtlFrame(2, 0x000000);
                }

function Button1_onclick() {
  res = obj.HWInitialize();
}

function Button2_onclick() {
   var stream;
   stream = obj.HWFinalize();
}


function Button3_onclick() {
   obj.HWClearPenSign();
}

function Button6_onclick() {
   obj.HWSetPenColor(0x000000);   
}

function Button7_onclick() {
   obj.HWSetPenColor(0xFF0000);   
}

function Button8_onclick() {
   obj.HWSetPenColor(0x00FF00);   
}

function Button9_onclick() {
   obj.HWSetPenColor(0x0000FF);   
}

function Button10_onclick() {
    penwidth++;
    if(penwidth >5)
       penwidth = 5;
    obj.HWSetPenWidth(penwidth);   
}

function Button11_onclick() {
    penwidth--;
    if(penwidth < 1)
       penwidth = 1;
    obj.HWSetPenWidth(penwidth);   
}

function Button12_onclick() {
   obj.HWSetPenMode(1);
}

function Button13_onclick() {
   obj.HWSetPenMode(0);
}

function Button14_onclick() {
   var stream;
   stream = obj.HWGetBase64Stream(2);
   alert(stream);
}
   
function Button15_onclick() {
   obj.HWSetFilePath("e:\\sign.jpg"); 
   obj.HWSaveFile();
}

function signComplete() {
    Button14_onclick();
}

function signRestart() {
     ;         
}

</script>

</head>
<body>
    <p align="center"><b><span class="style1">汉王手写签批控件Demo</span><br class="style1" /></p>
    <p style="margin-left: 40px"><b><span class="style2">Demo使用说明</span>:</p>
    <p style="margin-left: 40px"><span class="style3"> (1) &quot;初始化设备&quot; :打开设备,汉王手写板进入签字模式。 因为对设备是独占式的访问,所以在重新进行&quot;初始化设备&quot;动作之前,必须确保已经&quot;关闭设备&quot;。对应接口函数为HWInitialize()。<br /><br />(2) &quot;关闭设备&quot;:关闭设备,汉王手写板进入待机模式。对应接口函数为HWFinalize()。</span></p>
    <p style="margin-left: 40px"><span class="style3">(3) &quot;重新签名&quot;: 清空手写控件界面及汉王手写板上的笔迹。对应接口函数为HWClearPenSign()。<br /><br />(4) &quot;笔宽加粗&quot;/&quot;笔宽减细&quot;:调整画笔的粗细,支持5级设置,默认为3级。对应接口函数为HWSetPenWidth()。<br /><br />(5) &quot;画笔颜色&quot;:设置画笔的颜色。默认为黑色。对应接口函数为HWSetPenColor()。<br><br>(6)&quot;压力笔&quot;/&quot;钢笔&quot;:&quot;压力笔&quot;模式下,笔迹会随着压感发生粗细变化。&quot;钢笔&quot;模式下,笔迹粗细不变。对应接口函数为HWSetPenMode()。</span></p>
    <p style="margin-left: 40px"><span class="style3">(7)&quot;保存图像&quot;: 将图像保存至指定路径,对应接口函数为HWSaveFile()。调用此函数之前,请先调用HWSetFilePath()设置保存路径。支持图像格式为:bmp /jpg /png /gif。<br><br>(8)&quot;Base64Stream&quot;: 支持将图像转化为Base64数据流,以便于网络间的传输。</span></p>
    <p style="margin-left: 40px"><span class="style3">各接口函数的参数和返回值详情,请查阅“汉王手写签批控件接口文档.doc”。</span></p>
    <p style="margin-left: 40px"><br 
            class="style1" />           		
      <b>
    </p>
    <table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">           
       <tr class="style7">
	   <td width="30%" vAlign="center" height="217" align="right">
               <P>
			       签字区域:            
               </P>
	   </td>  
           <td  align="left">
              <object id="HWPenSign"
                    name="HWPenSign"
                    classid="clsid:E8F5278C-0C72-4561-8F7E-CCBC3E48C2E3"
                    width="600"
                    height="300">
              </object>
	   </td>
       </tr>                       
    </table>
    <p>&nbsp;
</p> 
    <p>&nbsp;
</p>
    <p style="margin-left: 500px">
          签名控制: 
          <input id = "button1" type ="button" value="初始化设备" onclick ="return Button1_onclick()" />
                &nbsp;&nbsp;
          <input id = "button2" type ="button" value="关闭设备" onclick ="return Button2_onclick()" />
                &nbsp;&nbsp; 
          <input id="Button3" type="button" value="重新签名" onclick="return Button3_onclick()" />
                <br><br> 
          画笔控制:
	  <input id="Button6" type="button" value="黑色" onclick="return Button6_onclick()" />
		 &nbsp;&nbsp;&nbsp;
          <input id="Button7" type="button" value="红色" onclick="return Button7_onclick()" />
		 &nbsp;&nbsp;&nbsp;
          <input id="Button8" type="button" value="绿色" onclick="return Button8_onclick()" />
		 &nbsp;&nbsp;&nbsp;
          <input id="Button9" type="button" value="蓝色" onclick="return Button9_onclick()" />
		<br><br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;  
          <input id="Button10" type="button" value="笔宽加粗" onclick="return Button10_onclick()" />
		 &nbsp;&nbsp;&nbsp;
          <input id="Button11" type="button" value="笔宽减细" onclick="return Button11_onclick()" /> 
                 <br><br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;  
          <input id="Button12" type="button" value="压力笔" onclick="return Button12_onclick()" />
		 &nbsp;&nbsp;&nbsp;
          <input id="Button13" type="button" value="钢笔" onclick="return Button13_onclick()" />
                <br><br>
            签名图像:
          &nbsp;&nbsp;<input id="Button14" type="button" value="Base64Stream" onclick="return Button14_onclick()" />
          &nbsp;&nbsp;&nbsp;
          <input id="Button15" type="button" value="保存图像" onclick="return Button15_onclick()" /> 
          &nbsp;&nbsp;
                <br><br>      
         
    </p>
</body>
</html>

allWebPlugin中间件集成步骤

第一步:导入js相关文件

导入jquery.min.js,allWebPlugin.Common.js,allWebPlugin.UI.js文件。

 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="js/allWebPlugin.Common.js"></script>
 <script type="text/javascript" src="js/allWebPlugin.UI.js"></script>  

第二步:替换<object>页面元素代码

将网页中<object>元素替换成<canvas>元素。如下图所示:

<td  align="left">
<!--object id="HWPenSign"
     name="HWPenSign"
     classid="clsid:E8F5278C-0C72-4561-8F7E-CCBC3E48C2E3"
     width="600"
     height="300">
     </object-->
<canvas id="pluginUI" width="600" height="300">
<p class="error">Sorry, It looks as though your browser does not support the canvas tag.</p>
</canvas>
</td>

第三步:拷贝控件创建方法

拷贝控件创建方法CreateContainer及CreatePlugin,将其放到网页onload事件里面,方便页面加载时,创建控件对象。其中createProxyPlugin方法创建控件对象,需要传入控件的classid或者ProgID。

function CreateContainer(){
	var canvas = document.getElementById('pluginUI');
	var license = "9y4LEm/V6Su9+CP9ION3CqBZzsnSyJW2BIOmkgGdrKd6LsGVXCWlcRBxGfVF1XOPzC9WxlN0wrsQJJzy/Sb5YUhnxibuGY6cwTXP6MALEUEQFzXbytCCYZ8yuWbKwaSdWw5/nsk02HtT/EqxC9jsQEwXfCiLGpeyww5MszBO4EV6/Whk4dpno9z1IP+gYlZ5emPuZWPcA0xfdPfMd8CdZ7O2Y1kH4iqJRcUDZpZLQZzRaaxD4GC6rmYjAT+0hOxf741S1EV6EjTzdZdllR2Gc3/ho/O+lqeG77Lq/sI7eGuRrB92QT4P/dmWmDpM0Qg9AAAA8AEAAQMCpzvCVYrodJHnQlzcchghAVhG8HkPd/M3WbD7ikYNYSMNpadQHw22md/os+H8in1qcUBIUHlshxFEKT84jEPIP39iTN7E4IqEACvPF8duWkErP8vRvrSSxA67jQEesJV2RkXphVUw20qAYDXse5UBsLuIlpsfae59Q3VuDFyGZ9K7Rj3fGG7lMrQxhNPj0IkDKfsa/4S2vDl43A4JLdGE8PyHMOxOGWIBwAzTQvOIA2gT2bC8bUP2HnHz//04r8CZ848wnMgZ8ifdtBGgPIIvhvhNvdHNW3d7GDWIFz7migklvNukCsVNhNjck73Co8JMQppp5n4RY5Ck0DdBVe1iogABAYICCgGCMEGy6w+KRf1qX5NoDdyEKnrHfuE5hco4f/fwKsNo3Dwo1sUFB9hbxusOUSAAyYDfvQWc4CdxoSf7kM4ojInlHHvTw0ppKCFV7H17iDOXdJFKZmkjeFCeubn3VezepCvW1+Z9s84M2uILZgIGw7eIQ/je0Bz+qEWyiqWbA4QYiTHzUwQtZyntNcqYpS0PxXXmV9I21wh48DIV/9DTeZW5OZwRcHivVXFaqW2uxngqGdbw1xyJ9AMhrGdt9S2R2rd1jzNq7ddiKN09TCt806vlF1zGAxb5zq6WjwPxeG7aoE33cTRnEg5WvNM4puhmYOWYi61D8j8lzXheUCJGpsw39CoAAAEOAAAAAUFXUEY=";	
	var installPackageUrl = "http://127.0.0.1:6651/install/allwebPlugin_x86_v2.0.1.16_20240806.exe";
	var installPackageVersion = "2.0.0.16";	
	hostCnt = new PluginHostCnt();
	if(hostCnt.IsInstall() == false){
		//未安装,需要手动安装
		if(confirm("allWebPlugin中间件未安装或未启动,是否立即安装?")){
			window.open(installPackageUrl, '_blank');
		}
	}else{
		//已安装,检测是否需要版本更新
		if(hostCnt.IsNewVersion(installPackageVersion) == false)
		{
			if(hostCnt.createContainer(canvas,"PluginContainer",license,true) == true)
			{	
				//hostCnt.UI.ForceShowUI(false);//创建时隐藏插件,需要调用这句,隐藏插件
				hostCnt.RegisterEvent("OnCreated;OnCommand;OnRibbonCtrlCommand;OnOLECommand");
				CreatePlugin();
			}
		}else{
			//需要升级
			alert("检测到升级包,立即升级。");
			hostCnt.UpdateVersion(installPackageUrl).then(function(data){
				if(data.code == 0)
				{	//检测是否安装成功
					var checkInstall = setInterval(function(){
						if(hostCnt.GetVersion() == installPackageVersion){
							window.location.reload();
							clearTimeout(checkInstall);
						}
					}, 1000);
					
				}
				else{
					window.open(installPackageUrl, '_blank');//直接下载包,手动安装
				}
			}).catch(function(strErr){
				window.open(installPackageUrl, '_blank');//直接下载包,手动安装
			});
		}
	}
}

function CreatePlugin(){
	if(hostCnt == null)
		return;
	obj = hostCnt.createProxyPlugin("{E8F5278C-0C72-4561-8F7E-CCBC3E48C2E3}");
}

第四步:运行效果

到此,汉王手写签批控件就集成完了。运行效果如下:

汉王手写签批执行效果
汉王手写签批手写效果

 

集成allWebPlugin完整代码

 为了方便大家了解allWebPlugin中间件技术,现将集成实例代码提供出来,如下如所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>汉王手写签批测试页面</title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <style type="text/css">
        .style1
        {
            font-size: xx-large;
            font-family: 宋体, Arial, Helvetica, sans-serif;
            color: #FF3399;
        }
       .style2
        {
            font-size: 16px;
            font-family: 宋体, Arial, Helvetica, sans-serif;
            color: #FF3399;
        }
       .style3
        {
            font-size: 12px;
            font-family: 宋体, Arial, Helvetica, sans-serif;
            color: #000000;
        }
		.style4
        {
            font-size: 12px;
            font-family: 宋体, Arial, Helvetica, sans-serif;
            color: #FF0000;
        }
   </style>
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="js/allWebPlugin.Common.js"></script>
 <script type="text/javascript" src="js/allWebPlugin.UI.js"></script>   
<script language="javascript" type="text/javascript">

 penwidth = 3;
 var obj;
 var hostCnt = null;
window.onload = function(){   
                  //obj = document.getElementById("HWPenSign");
				  CreateContainer();
                  obj.HWSetBkColor(0xE0F8E0);  
				 obj.HWSetCtlFrame(2, 0x000000);
         }
function CreateContainer(){
	var canvas = document.getElementById('pluginUI');
	var license = "9y4LEm/V6Su9+CP9ION3CqBZzsnSyJW2BIOmkgGdrKd6LsGVXCWlcRBxGfVF1XOPzC9WxlN0wrsQJJzy/Sb5YUhnxibuGY6cwTXP6MALEUEQFzXbytCCYZ8yuWbKwaSdWw5/nsk02HtT/EqxC9jsQEwXfCiLGpeyww5MszBO4EV6/Whk4dpno9z1IP+gYlZ5emPuZWPcA0xfdPfMd8CdZ7O2Y1kH4iqJRcUDZpZLQZzRaaxD4GC6rmYjAT+0hOxf741S1EV6EjTzdZdllR2Gc3/ho/O+lqeG77Lq/sI7eGuRrB92QT4P/dmWmDpM0Qg9AAAA8AEAAQMCpzvCVYrodJHnQlzcchghAVhG8HkPd/M3WbD7ikYNYSMNpadQHw22md/os+H8in1qcUBIUHlshxFEKT84jEPIP39iTN7E4IqEACvPF8duWkErP8vRvrSSxA67jQEesJV2RkXphVUw20qAYDXse5UBsLuIlpsfae59Q3VuDFyGZ9K7Rj3fGG7lMrQxhNPj0IkDKfsa/4S2vDl43A4JLdGE8PyHMOxOGWIBwAzTQvOIA2gT2bC8bUP2HnHz//04r8CZ848wnMgZ8ifdtBGgPIIvhvhNvdHNW3d7GDWIFz7migklvNukCsVNhNjck73Co8JMQppp5n4RY5Ck0DdBVe1iogABAYICCgGCMEGy6w+KRf1qX5NoDdyEKnrHfuE5hco4f/fwKsNo3Dwo1sUFB9hbxusOUSAAyYDfvQWc4CdxoSf7kM4ojInlHHvTw0ppKCFV7H17iDOXdJFKZmkjeFCeubn3VezepCvW1+Z9s84M2uILZgIGw7eIQ/je0Bz+qEWyiqWbA4QYiTHzUwQtZyntNcqYpS0PxXXmV9I21wh48DIV/9DTeZW5OZwRcHivVXFaqW2uxngqGdbw1xyJ9AMhrGdt9S2R2rd1jzNq7ddiKN09TCt806vlF1zGAxb5zq6WjwPxeG7aoE33cTRnEg5WvNM4puhmYOWYi61D8j8lzXheUCJGpsw39CoAAAEOAAAAAUFXUEY=";	
	var installPackageUrl = "http://127.0.0.1:6651/install/allwebPlugin_x86_v2.0.1.16_20240806.exe";
	var installPackageVersion = "2.0.0.16";	
	hostCnt = new PluginHostCnt();
	if(hostCnt.IsInstall() == false){
		//未安装,需要手动安装
		if(confirm("allWebPlugin中间件未安装或未启动,是否立即安装?")){
			window.open(installPackageUrl, '_blank');
		}
	}else{
		//已安装,检测是否需要版本更新
		if(hostCnt.IsNewVersion(installPackageVersion) == false)
		{
			if(hostCnt.createContainer(canvas,"PluginContainer",license,true) == true)
			{	
				//hostCnt.UI.ForceShowUI(false);//创建时隐藏插件,需要调用这句,隐藏插件
				hostCnt.RegisterEvent("OnCreated;OnCommand;OnRibbonCtrlCommand;OnOLECommand");
				CreatePlugin();
			}
		}else{
			//需要升级
			alert("检测到升级包,立即升级。");
			hostCnt.UpdateVersion(installPackageUrl).then(function(data){
				if(data.code == 0)
				{	//检测是否安装成功
					var checkInstall = setInterval(function(){
						if(hostCnt.GetVersion() == installPackageVersion){
							window.location.reload();
							clearTimeout(checkInstall);
						}
					}, 1000);
					
				}
				else{
					window.open(installPackageUrl, '_blank');//直接下载包,手动安装
				}
			}).catch(function(strErr){
				window.open(installPackageUrl, '_blank');//直接下载包,手动安装
			});
		}
	}
}

function CreatePlugin(){
	if(hostCnt == null)
		return;
	//{6888ECA8-57D0-6E0E-9B9B-F1FF9B2DBD86} allWebOffice
	//{C7F277DC-6C47-AB2C-FB6A-070DC8BE7533} suwellreader
	//{D89F482C-5045-4DB5-8C53-D2C9EE71D025} 老东家iWebOffice2015
	//{9BE31822-FDAD-461B-AD51-BE1D1C159921}  VLC
	//{082ECC40-38F1-4E8F-82D3-216009A96686}  RSignReader
	obj = hostCnt.createProxyPlugin("{E8F5278C-0C72-4561-8F7E-CCBC3E48C2E3}");
}
				
				

function Button1_onclick() {
  res = obj.HWInitialize();
}

function Button2_onclick() {
   var stream;
   stream = obj.HWFinalize();
}


function Button3_onclick() {
   obj.HWClearPenSign();
}

function Button6_onclick() {
   obj.HWSetPenColor(0x000000);   
}

function Button7_onclick() {
   obj.HWSetPenColor(0xFF0000);   
}

function Button8_onclick() {
   obj.HWSetPenColor(0x00FF00);   
}

function Button9_onclick() {
   obj.HWSetPenColor(0x0000FF);   
}

function Button10_onclick() {
    penwidth++;
    if(penwidth >5)
       penwidth = 5;
    obj.HWSetPenWidth(penwidth);   
}

function Button11_onclick() {
    penwidth--;
    if(penwidth < 1)
       penwidth = 1;
    obj.HWSetPenWidth(penwidth);   
}

function Button12_onclick() {
   obj.HWSetPenMode(1);
}

function Button13_onclick() {
   obj.HWSetPenMode(0);
}

function Button14_onclick() {
   var stream;
   stream = obj.HWGetBase64Stream(2);
   alert(stream);
}
   
function Button15_onclick() {
   obj.HWSetFilePath("e:\\sign.jpg"); 
   obj.HWSaveFile();
}

function signComplete() {
    Button14_onclick();
}

function signRestart() {
     ;         
}

</script>

</head>
<body>
    <p align="center"><b><span class="style1">汉王手写签批控件Demo</span><br class="style1" /></p>
    <p style="margin-left: 40px"><b><span class="style2">Demo使用说明</span>:</p>
    <p style="margin-left: 40px"><span class="style3"> (1) &quot;初始化设备&quot; :打开设备,汉王手写板进入签字模式。 因为对设备是独占式的访问,所以在重新进行&quot;初始化设备&quot;动作之前,必须确保已经&quot;关闭设备&quot;。对应接口函数为HWInitialize()。<br /><br />(2) &quot;关闭设备&quot;:关闭设备,汉王手写板进入待机模式。对应接口函数为HWFinalize()。</span></p>
    <p style="margin-left: 40px"><span class="style3">(3) &quot;重新签名&quot;: 清空手写控件界面及汉王手写板上的笔迹。对应接口函数为HWClearPenSign()。<br /><br />(4) &quot;笔宽加粗&quot;/&quot;笔宽减细&quot;:调整画笔的粗细,支持5级设置,默认为3级。对应接口函数为HWSetPenWidth()。<br /><br />(5) &quot;画笔颜色&quot;:设置画笔的颜色。默认为黑色。对应接口函数为HWSetPenColor()。<br><br>(6)&quot;压力笔&quot;/&quot;钢笔&quot;:&quot;压力笔&quot;模式下,笔迹会随着压感发生粗细变化。&quot;钢笔&quot;模式下,笔迹粗细不变。对应接口函数为HWSetPenMode()。</span></p>
    <p style="margin-left: 40px"><span class="style3">(7)&quot;保存图像&quot;: 将图像保存至指定路径,对应接口函数为HWSaveFile()。调用此函数之前,请先调用HWSetFilePath()设置保存路径。支持图像格式为:bmp /jpg /png /gif。<br><br>(8)&quot;Base64Stream&quot;: 支持将图像转化为Base64数据流,以便于网络间的传输。</span></p>
    <p style="margin-left: 40px"><span class="style3">各接口函数的参数和返回值详情,请查阅“汉王手写签批控件接口文档.doc”。</span></p>
    <p style="margin-left: 40px"><br 
            class="style1" />           		
      <b>
    </p>
    <table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">           
       <tr class="style7">
	   <td width="30%" vAlign="center" height="217" align="right">
               <P>
			       签字区域:            
               </P>
	   </td>  
           <td  align="left">
              <!--object id="HWPenSign"
                    name="HWPenSign"
                    classid="clsid:E8F5278C-0C72-4561-8F7E-CCBC3E48C2E3"
                    width="600"
                    height="300">
              </object-->
				<canvas id="pluginUI" width="600" height="300">
					<p class="error">Sorry, It looks as though your browser does not support the canvas tag.</p>
				</canvas>
	   </td>
       </tr>                       
    </table>
    <p>&nbsp;
</p> 
    <p>&nbsp;
</p>
    <p style="margin-left: 500px">
          签名控制: 
          <input id = "button1" type ="button" value="初始化设备" onclick ="return Button1_onclick()" />
                &nbsp;&nbsp;
          <input id = "button2" type ="button" value="关闭设备" onclick ="return Button2_onclick()" />
                &nbsp;&nbsp; 
          <input id="Button3" type="button" value="重新签名" onclick="return Button3_onclick()" />
                <br><br> 
          画笔控制:
	  <input id="Button6" type="button" value="黑色" onclick="return Button6_onclick()" />
		 &nbsp;&nbsp;&nbsp;
          <input id="Button7" type="button" value="红色" onclick="return Button7_onclick()" />
		 &nbsp;&nbsp;&nbsp;
          <input id="Button8" type="button" value="绿色" onclick="return Button8_onclick()" />
		 &nbsp;&nbsp;&nbsp;
          <input id="Button9" type="button" value="蓝色" onclick="return Button9_onclick()" />
		<br><br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;  
          <input id="Button10" type="button" value="笔宽加粗" onclick="return Button10_onclick()" />
		 &nbsp;&nbsp;&nbsp;
          <input id="Button11" type="button" value="笔宽减细" onclick="return Button11_onclick()" /> 
                 <br><br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;  
          <input id="Button12" type="button" value="压力笔" onclick="return Button12_onclick()" />
		 &nbsp;&nbsp;&nbsp;
          <input id="Button13" type="button" value="钢笔" onclick="return Button13_onclick()" />
                <br><br>
            签名图像:
          &nbsp;&nbsp;<input id="Button14" type="button" value="Base64Stream" onclick="return Button14_onclick()" />
          &nbsp;&nbsp;&nbsp;
          <input id="Button15" type="button" value="保存图像" onclick="return Button15_onclick()" /> 
          &nbsp;&nbsp;
                <br><br>      
         
    </p>
</body>
</html>
       
        

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/882491.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【计算机基础】用bat命令将Unity导出PC包转成单个exe可执行文件

Unity打包成exe可执行文件 上边连接是很久以前用过的方法&#xff0c;发现操作有些不一样了&#xff0c;并且如果按上述操作比较麻烦&#xff0c;所以写了个bat命令。 图1、导出的pc程序 如图1是导出的pc程序&#xff0c;点击exe文件可运行该程序。 添加pack_project.bat文件 …

大数据Flink(一百二十二):阿里云Flink MySQL连接器介绍

文章目录 阿里云Flink MySQL连接器介绍 一、特色功能 二、​​​​​​​语法结构 三、​​​​​​​​​​​​​​WITH参数 阿里云Flink MySQL连接器介绍 阿里云提供了MySQL连接器&#xff0c;其作为源表时&#xff0c;扮演的就是flink cdc的角色。 一、特色功能 MySQ…

操作系统 | 学习笔记 | | 王道 | 5.3 磁盘和固态硬盘

5.3 磁盘和固态硬盘 5.3.1 磁盘 磁盘结构 磁盘&#xff1a;磁盘的表面由一些磁性物质组成&#xff0c;可以用这些磁性物质来记录二进制数据 磁道&#xff1a;磁盘的盘面被划分成一个个磁道。这样的一个“圈”就是一个磁道 扇区&#xff1a;一个磁道又被划分成一个个扇区&am…

大数据毕业设计选题推荐-网络电视剧收视率分析系统-Hive-Hadoop-Spark

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、PHP、.NET、Node.js、GO、微信小程序、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇…

通信工程学习:什么是NFVO网络功能虚拟化编排器

NFVO&#xff1a;网络功能虚拟化编排器 NFVO&#xff08;Network Functions Virtualization Orchestrator&#xff09;&#xff0c;即网络功能虚拟化编排器&#xff0c;是网络功能虚拟化&#xff08;NFV&#xff09;架构中的核心组件之一。NFV是一种将传统电信网络中的网络节点…

从零开始学习Python

目录 从零开始学习Python 引言 环境搭建 安装Python解释器 选择IDE 基础语法 注释 变量和数据类型 变量命名规则 数据类型 运算符 算术运算符 比较运算符 逻辑运算符 输入和输出 控制流 条件语句 循环语句 for循环 while循环 循环控制语句 函数和模块 定…

黑马智数Day3

渲染基础Table列表 封装接口&#xff1a; export function getCardListAPI(params) {return request({url: /parking/card/list,params}) } 具体实现&#xff1a; import { getCardListAPI } from /apis/cardexport default {data() {return {// 请求参数params: {page: 1,pa…

乌克兰因安全风险首次禁用Telegram

据BleepingComputer消息&#xff0c;乌克兰国家网络安全协调中心 &#xff08;NCCC&#xff09; 以国家安全为由&#xff0c;已下令限制在政府机构、军事单位和关键基础设施内使用 Telegram 消息应用程序。 这一消息通过NCCC的官方 Facebook 账号对外发布&#xff0c;在公告中乌…

【小程序】uniapp自定义图标组件可动态更换svg颜色

组件描述 通过图标名称加载对应svg&#xff0c;size参数调整图标大小&#xff0c;color参数调整图标颜色 解决思路&#xff1a; 存svg获svg&#xff0c;对象方式正则替换svg的fill值&#xff0c;不改变源文件&#xff0c;通过base64直接加载缓存svg源文件&#xff0c;避免重…

上传富文本插入文件时报错:JSON parse error: Unexpected character解决办法

方式一&#xff08;加密解密&#xff09;&#xff1a; 1.前端 &#xff08;1&#xff09;安装 crypto-js npm install crypto-js&#xff08;2&#xff09;util下创建asc.js asc.js import CryptoJS from crypto-js// 需要和后端一致 const KEY CryptoJS.enc.Utf8.parse(…

爬虫逆向学习(七):补环境动态生成某数四代后缀MmEwMD

声明&#xff1a;本篇文章内容是整理并分享在学习网上各位大佬的优秀知识后的实战与踩坑记录 前言 这篇文章主要是研究如何动态生成后缀参数MmEwMD的&#xff0c;它是在文章爬虫逆向学习(六)&#xff1a;补环境过某数四代的基础上进行研究的&#xff0c;代码也是在它基础上增…

C++之初识STL(概念)

STL&#xff08;标准模板库&#xff09; STL广义分类为&#xff1a;容器&#xff0c;算法&#xff0c;迭代器 * **容器**和**算法**之间通过**迭代器**进行无缝连接 意义&#xff1a;C的**面向对象**和**泛型编程**思想&#xff0c;目的就是**复用性的提升** STL六大组件 1. 容…

论文阅读:Omni-Kernel Network for Image Restoration

论文地址&#xff1a;https://ojs.aaai.org/index.php/AAAI/article/view/27907 项目地址&#xff1a;https://github.com/c-yn/OKNet 发表时间&#xff1a;2024 图像恢复的目的是从一个退化的低质量的观测中重建一个高质量的图像。最近&#xff0c;Transformer模型由于其强大…

JavaScript 安装库npm报错

今天在编写JavaScript代码时&#xff0c;缺少了包express。 const express require(express); const app express();app.get(/, (req, res) > {res.send(Hello, world!); });app.listen(3000, () > {console.log(Server is running on port 3000); });npm install exp…

【Redis技能熟练掌握之十年内功】

Redis技能熟练掌握之十年内功 1.redis是什么&#xff1f;为什么要使用redis&#xff1f;2.redis一般应用于什么场景&#xff08;四个场景&#xff09;&#xff1f;3. Redis持久化机制是什么&#xff1f;各自的优缺点&#xff1f;一般咋么用&#xff1f;4. redis五个基础类型支持…

速通汇编(七)BX、SI、DI寄存器,BP寄存器,直接寻址和间接寻址

下文中出现的"idata"&#xff0c;指的都是任意常量 一&#xff0c;基于BX、SI、DI等寄存器的寻址形式 在第五篇中曾介绍过DS寄存器的作用&#xff0c;简要复习一下->速通汇编&#xff08;五&#xff09;认识段地址与偏移地址&#xff0c;CS、IP寄存器和jmp指令&a…

百度飞浆Paddle OCR检测和识别【OCR数据收集、标注、数据集划分、检测识别模型训练、导出模型】

文章目录 前言一、OCR数据集采集二、OCR数据标注三、划分数据集四、数据训练五、导出模型 前言 1、我的电脑没有GPU&#xff0c;如果不使用AI Studio训练的话&#xff0c;第一遍我是按照CPU进行环境配置和训练的&#xff0c;可以参考这篇文章&#xff0c;我按着弄了一遍&#…

Kafka技术详解[1]:简介与基础概念

目录 1. Kafka入门 1.1 概述 1.1.1 初识Kafka 1.1.2 消息队列 1.1.3 生产者-消费者模式 1.1.4 消息中间件对比 1.1.5 ZooKeeper 1. Kafka入门 1.1 概述 1.1.1 初识Kafka Kafka是由Scala和Java语言开发的高吞吐量分布式消息发布和订阅系统&#xff0c;也是大数据技术领…

10月23-27日六西格玛绿带公开课即将在雄安新区开课

在金秋送爽、硕果累累的季节里&#xff0c;天行健管理咨询公司宣布了一项重要决定——定于10月23日至27日&#xff0c;在充满未来气息的河北雄安新区&#xff0c;举办一场旨在提升企业质量管理水平、培养精英人才的六西格玛绿带公开课。此次课程的举办&#xff0c;不仅是对当前…

Spring6梳理9—— 依赖注入之注入对象类型属性

目录 9.1 依赖注入之外部注入对象类型属性 9.1.1 创建dept与emp类 9.1.2 创建配置文件 9.1.3 创建测试类 9.1.4 运行结果 9.2 依赖注入之内部注入对象类型 9.3 依赖注入之级联注入对象类型 9.1 依赖注入之外部注入对象类型属性 9.1.1 创建dept与emp类 1.dept…