把掘金贴到Firefox需要几步？

从前

想要制作证件照，需要先把图片用QQ传到电脑，再用PS手动抠图；

看到一句喜欢的话，想要记到电脑里，需要一个字一个字用键盘打出来；

看到黑板上老师写的公式，想要记到Word里，需要用MathType一点点打出来；

但是有没有可能，只用手机拍照，就能搞定上面所有的事，一步到位？

为了实现这个想法，我做了一些混合开发的尝试，于是便有了：传影–所见即所得

预览

图片	文字	公式

缘起

一年前我在机器之心的一则名为《一部手机，万物皆可复制粘贴，这位兼职写代码的设计师将AR玩出了新高度》的新闻里首次看到这种AR+ML的原型演示，讲真当时有被惊艳到，在想自己能不能也做一个。

最近有了些时间就照着新闻里 cyrildiagne 的 ar-cutpaste 原型仿写了一个，效果还算符合自己的预期，暂且称它为：传影–所见即所得

开发过程

Flutter

整个项目是用Flutter去开发的，过程还算顺利，借助Flutter的跨端能力，可以完全复用移动端与桌面端的代码，整个APP其实只写一个Flutter项目就搞定了。

不过在桌面端，目前Flutter相关的三方插件生态约等于无，只能自己手写原生代码，通过插件的形式把相关能力接口暴露给Flutter去调用。

这时就更加深刻的感受到Flutter只是一个UI框架而已，想要啥功能还是得自己写原生平台的代码去实现，自己动手丰衣足食?

macOS

目前整个项目在桌面端还只支持macOS，因为我的主力办公设备是MacBook Pro，所以并没有去兼容Windows和Linux平台。不过兼容起来应该不会太难，不过是在不同平台上实现插件能力罢了，不会影响已有功能。

公式识别

我大学时主修的专业是数学，平常写论文的时候最头疼的就是公式定理的输入，所以我为传影加入了公式识别（转latex）的功能。

图像识别

为了使项目更容易部署，上手即用，此处传影不同于ar-cutpaste在本地搭建图像识别服务的方式，而是直接调用第三方服务商的接口去更专业的处理图像内容，具体为：

自动输入

解决了图像识别的问题，下一步无非就是把识别出的内容发送到电脑上输入了。

这一步本质其实是一个“CTRL+C”、“CTRL+V”的操作，模拟键盘与鼠标的输入就OK了。

坐标映射

整个项目最有趣且最关键的地方在于：如何把相机中我们看到的物体转换到屏幕坐标？

这里我在cyrildiagne 的 screenpoint里找到了答案：利用 OpenCV SIFT 找出拍摄照片与屏幕截图之间的相似特征点，然后得到照片坐标到屏幕坐标之间的透视转换矩阵，进而得出照片视野中心点在屏幕中的坐标，实现指哪儿打哪儿。

Screenpoint

当然只知道视野中心点是不够的，我们还需要知道照片尺寸与屏幕尺寸之间的比例关系，才能将图片所见即所得的“贴”到电脑上，这里我在screenpoint的基础上，使用BFMatcher暴力匹配出相似特征点，然后分别求出目标区域的左上角，右下角与视野中心点在屏幕中的的坐标，以满足贴图与输入的需求。

Python

这里坐标映射是利用python3生态下的opencv库去处理的，为了把它引入到Flutter项目中，可以使用process_run来运行shell脚本，根据输出来得到计算结果，详见packages/screenpoint/index.py

Serverless

考虑到这里使用了opencv-python依赖，需要用户本地安装python3环境并安装opencv-python库，这对普通用户是不友好的，可以将坐标映射模块迁移到腾讯云Serverless云函数中通过http网关接口调用。

总结

根据上面的一些分析，想必各位已经有标题里问题的答案了。

开源地址：github.com/idootop/chu…

白嫖可耻，欢迎star?