wordpress論壇收費嗎網(wǎng)站優(yōu)化 秦皇島
背景
? ? ? ? 近日，有網(wǎng)友咨詢漢王手寫簽批控件是否可以通過allWebPlugin中間件技術(shù)加載到谷歌、火狐、Edge等瀏覽器？為此，筆者詳細了解了一下漢王手寫簽批控件，它是一個標準的ActiveX控件，曾經(jīng)主要在IE瀏覽器使用，由于微軟禁用IE瀏覽器，導(dǎo)致漢王手寫簽批控件無法使用。因此，網(wǎng)友希望能在谷歌、火狐、Edge等瀏覽器上使用這個控件。
????????allWebPlugin中間件是一款為用戶提供安全、可靠、便捷的瀏覽器插件服務(wù)的中間件產(chǎn)品，致力于將瀏覽器插件重新應(yīng)用到所有瀏覽器。它不僅可以實現(xiàn)ActiveX控件在現(xiàn)代瀏覽器上使用，而且集成也非常方便。
準備工作
1、下載allWebPlugin中間件產(chǎn)品，具體如下：
鏈接：百度網(wǎng)盤 請輸入提取碼?
提取碼：z3q0?
如下圖所示，下載allWebPlugin_x86_v2.0.0.20_alpha_演示包_20240908.zip安裝包。
??2、下載漢王手寫簽批控件，筆者百度網(wǎng)盤放了一份漢王手寫簽批控件demo實例。具體如下：
鏈接：百度網(wǎng)盤 請輸入提取碼?
提取碼：z3q0?
如下圖所示，下載ESP370ocx正式版-20150515.zip安裝包。
下載以上內(nèi)容，并安裝。
漢王手寫簽批控件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) "初始化設(shè)備" ：打開設(shè)備，漢王手寫板進入簽字模式。 因為對設(shè)備是獨占式的訪問，所以在重新進行"初始化設(shè)備"動作之前，必須確保已經(jīng)"關(guān)閉設(shè)備"。對應(yīng)接口函數(shù)為HWInitialize()。<br /><br />(2) "關(guān)閉設(shè)備"：關(guān)閉設(shè)備，漢王手寫板進入待機模式。對應(yīng)接口函數(shù)為HWFinalize()。</span></p><p style="margin-left: 40px"><span class="style3">(3) "重新簽名": 清空手寫控件界面及漢王手寫板上的筆跡。對應(yīng)接口函數(shù)為HWClearPenSign()。<br /><br />(4) "筆寬加粗"/"筆寬減細"：調(diào)整畫筆的粗細，支持5級設(shè)置，默認為3級。對應(yīng)接口函數(shù)為HWSetPenWidth()。<br /><br />(5) "畫筆顏色"：設(shè)置畫筆的顏色。默認為黑色。對應(yīng)接口函數(shù)為HWSetPenColor()。<br><br>(6)"壓力筆"/"鋼筆"："壓力筆"模式下，筆跡會隨著壓感發(fā)生粗細變化。"鋼筆"模式下，筆跡粗細不變。對應(yīng)接口函數(shù)為HWSetPenMode()。</span></p><p style="margin-left: 40px"><span class="style3">(7)"保存圖像": 將圖像保存至指定路徑，對應(yīng)接口函數(shù)為HWSaveFile()。調(diào)用此函數(shù)之前，請先調(diào)用HWSetFilePath()設(shè)置保存路徑。支持圖像格式為:bmp /jpg /png /gif。<br><br>(8)"Base64Stream": 支持將圖像轉(zhuǎn)化為Base64數(shù)據(jù)流，以便于網(wǎng)絡(luò)間的傳輸。</span></p><p style="margin-left: 40px"><span class="style3">各接口函數(shù)的參數(shù)和返回值詳情，請查閱“漢王手寫簽批控件接口文檔.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>簽字區(qū)域： </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>
</p> <p>
</p><p style="margin-left: 500px">簽名控制： <input id = "button1" type ="button" value="初始化設(shè)備" onclick ="return Button1_onclick()" /> <input id = "button2" type ="button" value="關(guān)閉設(shè)備" onclick ="return Button2_onclick()" /> <input id="Button3" type="button" value="重新簽名" onclick="return Button3_onclick()" /><br><br> 畫筆控制：<input id="Button6" type="button" value="黑色" onclick="return Button6_onclick()" /> <input id="Button7" type="button" value="紅色" onclick="return Button7_onclick()" /> <input id="Button8" type="button" value="綠色" onclick="return Button8_onclick()" /> <input id="Button9" type="button" value="藍色" onclick="return Button9_onclick()" /><br><br> <input id="Button10" type="button" value="筆寬加粗" onclick="return Button10_onclick()" /> <input id="Button11" type="button" value="筆寬減細" onclick="return Button11_onclick()" /> <br><br> <input id="Button12" type="button" value="壓力筆" onclick="return Button12_onclick()" /> <input id="Button13" type="button" value="鋼筆" onclick="return Button13_onclick()" /><br><br>簽名圖像: <input id="Button14" type="button" value="Base64Stream" onclick="return Button14_onclick()" /> <input id="Button15" type="button" value="保存圖像" onclick="return Button15_onclick()" /> <br><br> </p>
</body>
</html>allWebPlugin中間件集成步驟
第一步：導(dǎo)入js相關(guān)文件
導(dǎo)入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>頁面元素代碼
將網(wǎng)頁中<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>第三步：拷貝控件創(chuàng)建方法
拷貝控件創(chuàng)建方法CreateContainer及CreatePlugin，將其放到網(wǎng)頁onload事件里面，方便頁面加載時，創(chuàng)建控件對象。其中createProxyPlugin方法創(chuàng)建控件對象，需要傳入控件的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);//創(chuàng)建時隱藏插件,需要調(diào)用這句，隱藏插件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中間件技術(shù)，現(xiàn)將集成實例代碼提供出來，如下如所示：
<!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);//創(chuàng)建時隱藏插件,需要調(diào)用這句，隱藏插件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} RSignReaderobj = 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) "初始化設(shè)備" ：打開設(shè)備，漢王手寫板進入簽字模式。 因為對設(shè)備是獨占式的訪問，所以在重新進行"初始化設(shè)備"動作之前，必須確保已經(jīng)"關(guān)閉設(shè)備"。對應(yīng)接口函數(shù)為HWInitialize()。<br /><br />(2) "關(guān)閉設(shè)備"：關(guān)閉設(shè)備，漢王手寫板進入待機模式。對應(yīng)接口函數(shù)為HWFinalize()。</span></p><p style="margin-left: 40px"><span class="style3">(3) "重新簽名": 清空手寫控件界面及漢王手寫板上的筆跡。對應(yīng)接口函數(shù)為HWClearPenSign()。<br /><br />(4) "筆寬加粗"/"筆寬減細"：調(diào)整畫筆的粗細，支持5級設(shè)置，默認為3級。對應(yīng)接口函數(shù)為HWSetPenWidth()。<br /><br />(5) "畫筆顏色"：設(shè)置畫筆的顏色。默認為黑色。對應(yīng)接口函數(shù)為HWSetPenColor()。<br><br>(6)"壓力筆"/"鋼筆"："壓力筆"模式下，筆跡會隨著壓感發(fā)生粗細變化。"鋼筆"模式下，筆跡粗細不變。對應(yīng)接口函數(shù)為HWSetPenMode()。</span></p><p style="margin-left: 40px"><span class="style3">(7)"保存圖像": 將圖像保存至指定路徑，對應(yīng)接口函數(shù)為HWSaveFile()。調(diào)用此函數(shù)之前，請先調(diào)用HWSetFilePath()設(shè)置保存路徑。支持圖像格式為:bmp /jpg /png /gif。<br><br>(8)"Base64Stream": 支持將圖像轉(zhuǎn)化為Base64數(shù)據(jù)流，以便于網(wǎng)絡(luò)間的傳輸。</span></p><p style="margin-left: 40px"><span class="style3">各接口函數(shù)的參數(shù)和返回值詳情，請查閱“漢王手寫簽批控件接口文檔.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>簽字區(qū)域： </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>
</p> <p>
</p><p style="margin-left: 500px">簽名控制： <input id = "button1" type ="button" value="初始化設(shè)備" onclick ="return Button1_onclick()" /> <input id = "button2" type ="button" value="關(guān)閉設(shè)備" onclick ="return Button2_onclick()" /> <input id="Button3" type="button" value="重新簽名" onclick="return Button3_onclick()" /><br><br> 畫筆控制：<input id="Button6" type="button" value="黑色" onclick="return Button6_onclick()" /> <input id="Button7" type="button" value="紅色" onclick="return Button7_onclick()" /> <input id="Button8" type="button" value="綠色" onclick="return Button8_onclick()" /> <input id="Button9" type="button" value="藍色" onclick="return Button9_onclick()" /><br><br> <input id="Button10" type="button" value="筆寬加粗" onclick="return Button10_onclick()" /> <input id="Button11" type="button" value="筆寬減細" onclick="return Button11_onclick()" /> <br><br> <input id="Button12" type="button" value="壓力筆" onclick="return Button12_onclick()" /> <input id="Button13" type="button" value="鋼筆" onclick="return Button13_onclick()" /><br><br>簽名圖像: <input id="Button14" type="button" value="Base64Stream" onclick="return Button14_onclick()" /> <input id="Button15" type="button" value="保存圖像" onclick="return Button15_onclick()" /> <br><br> </p>
</body>
</html>