接收二进制数据
本节示例可以参考示例文件"CaseStudy\WebViewer\接收消息.Table"的窗口"二进制数据"。
chrome.webview.postMessage方法只能发送字符串(对象也是序列化成JSON字符串后发送)。
如果要发送二进制数据，可以将数据转换为base64字符串然后发送，在Foxtable端将收到的base64字符串还原成二进制数据。
本节示例在前端基于Canvas合计了一个简单的绘图程序，绘制完成后，单击"发送Canvas图片到Foxtable"，既可以将绘制结果发给Foxtable，由Foxtable负责将图片保存为本地文件。
1、窗口的AfterLoad事件代码：
'''Async
Dim
wv
As
WebViewer = e.Form.Controls("WebViewer1").WebViewer
Await
wv.EnsureCoreWebView2Async(Nothing)
'初始化浏览器
'定义测试页面
Dim
html
As
String
=
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas
手绘与Base64发送</title>
<style>
body { font-family: Arial; padding: 16px; }
canvas { border: 1px solid #ccc; cursor: crosshair; }
button { margin-top: 10px; }
</style>
</head>
<body>
<h3>Canvas
手绘示例</h3>
<canvas id="myCanvas" width="500" height="400"></canvas>
<br /><br />
<button onclick="sendCanvasImage()">发送Canvas图片到Foxtable</button>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let drawing = false;
//
设置线条样式
ctx.lineWidth = 5;
ctx.lineJoin = ctx.lineCap = 'round';
ctx.strokeStyle = '#4CAF50'; //
线条颜色
// 开始绘制
canvas.addEventListener('mousedown', function(e) {
drawing = true;
ctx.beginPath();
ctx.moveTo(e.offsetX, e.offsetY);
});
// 绘制中
canvas.addEventListener('mousemove', function(e) {
if (!drawing) return;
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
});
// 停止绘制
canvas.addEventListener('mouseup', function() {
if (drawing) {
ctx.closePath();
drawing = false;
}
});
//
取消绘制（当鼠标移出canvas区域）
canvas.addEventListener('mouseout', function() {
drawing = false;
});
// 发送Canvas图像数据
function sendCanvasImage() {
const dataUrl = canvas.toDataURL('image/png');
window.chrome.webview.postMessage({
command: "save_canvas_image",
imageData: dataUrl
});
}
</script>
</body>
</html>
]]>.Value
wv.CoreWebView2.NavigateToString(html)
'打开测试页面
2、WebMessageReceived事件代码：
Try
Dim
jo
As
JObject = JsonConvert.DeserializeObject(e.WebMessageAsJson)
Dim
command
As
String
= jo("command").ToString()
If
command =
"save_canvas_image"
Then
Dim
dataUrl
As
String
= jo("imageData").ToString()
If
String.IsNullOrEmpty(dataUrl)
Then
MessageBox.Show("图像数据为空")
Return
End
If
Dim
prefix
As
String
=
"data:image/png;base64,"
If
Not
dataUrl.StartsWith(prefix)
Then
MessageBox.Show("无效的图像格式")
Return
End
If
Dim
base64
As
String
= dataUrl.Substring(prefix.Length)
Dim
imageBytes
As
Byte()
= Convert.FromBase64String(base64)
Dim
saveFolder
As
String
=
"C:\temp"
If
Not
FileSys.DirectoryExists(saveFolder)
Then
FileSys.CreateDirectory(saveFolder)
End
If
Dim
saveFile
As
String
= saveFolder &
"\canvas_image.png"
FileSys.WriteAllBytes(saveFile, imageBytes,
False)
MessageBoxA.Show("文件已经保存在目录'c:\temp'中",
"提示",
MessageBoxButtons.OK, MessageBoxIcon.Information)
'必修用MessageBoxA
End
If
Catch
ex
As
Exception
MessageBoxA.Show("处理失败："
& ex.Message,
"错误",
MessageBoxButtons.OK, MessageBoxIcon.Error)
'必修用MessageBoxA
End
Try
重要提醒
在WebViewer的事件代码中使用的对话框，必须是异步对话框，例如这里的MessageBoxA，因为普通对话框会阻塞进程，导致WebViewer崩溃。
关于异步对话框，请参考：异步对话框