在生活中会遇到以下场景：给定一张纸质版表格，或者图片表格，如何将其数字化，能够进行编辑。该如何进行操作呢？像打字员一样一个个重新打印一遍？使用OCR识别图中文字，在一点点复制到表格中，这些方法都可以。但如果表格有成千上万行怎么办呢，难道还一个个的打印吗？这次内容我们教你如何1分钟内解决此事。
机器学习识别表格
前面我们介绍了如何识别图片中的文字，然后将其转换为文本，可以进行编辑。识别表格同样的原理。其实就是应用了机器学习中的图片识别。当然有部分人tree new bee为人工智能，其实也没这么玄乎。原理并不难，既然都能识别图片区分出猫和狗。那么表格图片基本上只是黑白线条，识别起来应该更加容易。图片识别主要是将图片分割为像素点，根据像素点RGB的组合不同来进行区分。比如python中比较有名的OpenCV包就用来处理图片。Python+Opencv+pytesser可以开发程序识别图片。
当然了，这里不是要求大家人人都能开发程序，其实已经有很多能够识别图片表格的小工具了，直接摄像头拍照，然后直接就可以转换为excel表格，接下来我们就来介绍一下。
图片表格识别工具
目前已经有很多微信小程序支持表格识别，其中有些免费，有些是收费的，根据个人具体情况进行选择。
打开微信小程序界面，搜索“表格识别”，就会搜索出很多工具，这里我们测试这款表格识别大师，每个用户有两次免费试用机会。
待识别图片：
开始识别：
识别结果：最终识别结果非常不错，准确度很高。
图片表格识别
我们看到识别结果还可以，当然你的表格要清晰，你别用人眼都很难识别的表格让机器去判断，类似的工具还有ABBYY FineReader，功能十分强大。这些都是付费工具，体验会很好，收费也很合理吗。如果你想要免费工具也有。接下来我们推荐一款免费工具。微软AI识图，微软官方出的小程序，登录账号之后可以永久使用，我们来测试一下，同样的图片，在微软AI识图程序中，结果可以直接转换为PPT格式的表格，也可以直接进行编辑。不过我们这个案例中有部分图片内容没有识别出来。不知道调整下图片亮度是否有改善，大家可以将文中图片下载一下进行尝试。

大家好，我们在利用WPS表格或者Excel制作文档的时候，经常会遇到英文的难题，如果是从网上下载的，我们想要批量将英文字母转换为大写字母或者小写字母该如何操作呢，其实非常简单，强大的WPS表格和Excel非常万能，具体怎样呢一起来学习一下吧。
批量转换英文大小写
首先我们看到如下表格，前面的单词都是首字母是大写，后面是小写，我们需要批量将它们转换成大写或者小写。
我们在大写中输入=UPPER，然后表格会出现UPPER的函数，双击这个函数，在括号里单击A3单元框。
单击回车，选中B3单元格下拉填充框，B列的英文字母就都变成大写字母了。
接下来我们看小写，我们在大写中输入=LOWER，然后表格会出现LOWER的函数，双击这个函数，在括号里单击A3单元框。
单击回车，选中C3单元格下拉填充框，C列的英文字母就都变成小写字母了。
那么，在WPS表格和Excel中，利用UPPER和LOWER函数来批量转换英文大小写的方法，是不是很简单呢，你学会了吗？

今天，小编和大家分享一下，如何完成下面这个图中H列的效果：
工作中有一些项目进程跟踪表格，通常如下图所示，在“完成情况”一列中会通过文字来标识项目完成情况： 
当前面6个学习课程全部打勾，则标识“已结课”，否则标识“学习中”。
1：在H2单元格中输入以下公式 ： = N(countblank (B2:G2)=0)
函数解释：
countblank函数用于统计一个区域中有多少空白单元格，如果前面六个阶段的单元格中不包含空白单元格，则公式结果返回True(即表示Excel课程已学完)，否则返回False(即表示Excel课程还在学习中)。
而外围的N函数用于将上述的True或False的结果转换为数值1或0，True为1，False为0。
由此H列的结果就是由数值0或1来表示Excel课程是否已完成，如下图所示：
第2步： 选中H列单元格，按ctrl+1打开【设置单元格格式】对话框—【自定义】，然后在右侧的【类型】编辑栏中输入： 已结课;;学习中
自定义数字格式设置完成后，如下图所示：
第3步： 再次选择H列单元格，依次点击【开始】—【条件格式】—【图标集】—【其他规则】，打开【新建格式规则】对话框—选择一种【图标样式】，最右边的两个【类型】都选择【数字】，左边的两个【值】分别填写1和0后确定 

事件代理功能点分享
看过前面几篇文章的读者相信也应该有所了解了，我们借助于团队内部开发的编辑器实现了很多成功的项目案例，已经多次看到我们点击一个文本、一个按钮等等…去弹出一个表格之类的交互，有些同学难免有些好奇我们是如何实现在 canvas 图形对象上实现事件派发和监听的，接下来听我娓娓道来。
准备工作
其实在实现事件代理对象之前，我实现过一个文本对象，就是在 canvas 上绘制出一个固定默认宽高的矩形，用户双击时可输入文字，它的实现可谓是非常简单。但是其中也有不容忽视的小细节需要注意。
文本对象的实现

双击文本对象时，实现一个临时的 DOM 节点
    // 创建input
    createTextInput() {
        this.setVisible(false)
        const textInput = document.createElement("input")
        this.c("textInput", textInput)
        // 设置基本样式
        ...
        //input刚创建出来并不会自动聚焦
        //这里需要调用一次自身focus 让input聚焦
        textInput.focus()
        const remove = () => {
            // 删除Input
            this.removeTextInput()
            textInput.removeEventListener("blur", remove, false)
        }
        textInput.addEventListener("blur", remove, false)
    }

    // 更新input的位置
    updateTextInput() {
        this.setVisible(false)
        const textInput = this.getClient("textInput")
        const style = textInput.style
        const zoom = this._network.getZoom()
        const rect = this._network.getViewRect()
        const { x, y } = this.getLocation()
        style.display = "block"
        style.left = x * zoom + -rect.x + "px"
        style.top = y * zoom + -rect.y + "px"
    }

记录并存储用户键入的内容和操作
这一步由于我们采用的是 input 所以我们只需要在 input 失去焦点的时候，获取到 input.value 的内容就行,同时也一定要注意要删除掉 input 节点，否则页面上的文本一旦多了起来，会很大程度影响性能.

监听用户离开，不再操作临时 DOM 节点，将键入的内容缓存取出设置到

文本对象上
在 UI 绘制中控制 canvas 绘制用户输入的内容
扩展部分:

暴露出部分可控的接口和方法在外部，用户可在属性面板配置操作轻松实现文字阴影、跑马灯、渐变色…等各种功能

事件代理对象
由此想到了我们是不是也可以实现一个类似的事件代理对象，这样一来我们就能轻松操作我们框架上 canvas 画布里的各种对象了。接下来就让我们一起去瞧瞧团队里是如何实现的事件代理对象。
用什么实现代理
使用虚拟的一个 HTMLNODE 节点代理目标对象事件
// BaseHTMLNode是自己封装的一个原生DOM节点对象
class EventProxyNode extends BaseHTMLNode {
  constructor(network) {
    // 关联的目标对象
    this._attacher = null;
  }
  ...
}

设计的时候要考虑到使用时传入一个目标对象关联绑定
关联目标对象
在这里我们通过绑定事件和派发事件去使得目标对象和代理对象关联

在编辑器中已经预留了派发事件和监听事件的操作面板。

在工具中步骤截图如下:

打开事件代理开关
在目标对象上派发一个事件 配置派发的事件


然后在监听对象绑定监听事件并且写上处理逻辑,例如跳转切换等等…

由于我们在画布交互对象中注册了交互事件监听,每当我们的事件代理对象触发事件时就派发

一个画布的事件出去



预览效果



(不知道是哪位小伙伴写的注释，给他点赞 👍)

关于事件代理是如何执行代理的代码如下所示，每次代理对象触发了事件后就通过我们的canvas画布对象把事件派发出去，传递的参数当中是代理对象关联的目标对象，这样就相当于是我们的目标对象触发了这个事件,然后只需要在监听对象上绑定监听写上处理逻辑即可。
/**
 * 事件代理网元触发事件的时候把事件派发到宿主网元上
 * @param {*} network
 */
function addEventProxyInteraction(network) {
  network.addInteractionListener((e) => {
    if (e.element instanceof EventProxyNode) {
      network.fireInteractionEvent({
        //   事件名称
        kind: e.kind,
        //  事件源
        element: e.element._attacher,
        // 事件对象
        event: e.event,
      });
    }
  });
}

管理事件代理
在这里我们的管理事件代理对象的就是目标对象，当我们初始化渲染页面生成图元时，

就会生成对应的事件代理对象，并且在属性面板预留了一个开关用来控制是否启用事件代理对象
    // 创建事件代理对象
    createEventProxyNode() {
        if (this._eventProxyNode) {
        return
        }
        this._eventProxyNode = new EventProxyNode(this._network)
        const parent = this.getParent()
        this._eventProxyNode.setParent(parent)
        const zoom = this._network.getZoom()
        this._eventProxyNode.scaleWithZoom(zoom)
        const { x, y, width, height } = this.getRect()
        this._eventProxyNode.setLocation(x, y)
        this._eventProxyNode.setSize(width, height)
        this._eventProxyNode.append()
        this._eventProxyNode._attacher = this
    }

    // 初始化事件代理对象
    initProxyNodes() {
        const box = this._box
        box.forEach(node => {
        if (node.getEventProxy && node.getEventProxy()) {
            node.createEventProxyNode()
        }
        })
    }
    ...

结尾总结
这样一来我们就能点击一个明明不是 DOM 节点，也不是我们框架当中的一个内置对象，却依然能够触发一系列的事件，并且还能在配置当中灵活配置相应的事件，方便了我们去实现各种交互。

有时当我们实现一个很小的功能点的时候，可以根据这个功能点放大，宏观的去思考一下有没有可能实现一个通用的、可复用的功能点，功能虽小，实现虽简单，但是却能方便我们做很多事，高楼大厦也是从一砖一瓦来的。
如果对可视化感兴趣，可以和我交流，微信541002349. 另外关注公众号“ITMan彪叔” 可以及时收到更多有价值的文章。