微信小程序拍照解数独

原创

已于 2022-05-21 17:25:56 修改 · 7.2k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #opencv #图像处理 #算法

于 2022-05-21 15:48:03 首次发布

本文分享了作者如何利用微信小程序、OpenCV、Tesseract和深度优先解数独算法，实现数独图片的自动识别和求解过程，包括图像处理、轮廓检测、透视变换和服务器端识别技术的详细步骤。

之前刷数独玩，出于偷懒的思想，总想着用计算机去解决。算法没少些，之前通过手工录入的9x9数据解数独，深度优先遍历算法，很容易。但总想更加方便一点，比如拍照直接解析一个数独的表格，自动解出来。

正好前几天休假，有空，就做了一些尝试，然后基本上给做出来了。

先上成果，截图如下：


打开的空白界面	拍照，拍一张数独图片	识别过程


识别完成，但有错误	点击错误单元格，修改错误	完成求解

有感兴趣的同学可以到这里体验 :)，当然bug是会有的，一切都是会有的 :)，我也会不停地升级。

下面说一下思路

要实现这个功能，前面提到，早就想做，但无奈之前对图像识别入门太浅，没弄明白，这次也正好趁着休假，好好恶补了一下相关的知识，解决方案还是比较粗浅和粗暴的，有更好的方法，也欢迎大家来一起讨论。

涉及到的技术和工具：

1. 微信小程序开发
2. 图像处理，这里用OpenCV
3. 图像识别，用的Tesseract，在.NET core web服务器上实现
4. 解数独算法，用的.Net Core做的Web服务器

下面说详细的内容：

微信小程序开发不多说，也不是本文的重点。

图像处理涉及到OpenCV，最早是想直接图片扔到服务器端，由服务器端识别和后续处理，但考虑到那样太没有技术含量，加上服务器端毕竟是个人的环境，流量是按量收费的，所以考虑了把图像处理算法放到了微信小程序端。

这里感谢一下这位大大：sanyuered，以及他的github：github，提供了将opencv.js通过webassembly方式在小程序端执行的思路，按照大大的指引，使用了opencv 3.4.16版本的wasm文件的br压缩版，以及提供的相关接口opencv_exec.js文件。

有了这个，就在小程序里直接拍照和处理了，可以选择相册或者直接拍照。

async function takePhotoDirectly(_that, cameraContext) {
  try {
    // 拍照
    var photoFilepath = await wx2sync.takePhoto(cameraContext);
    _that.setData({ isTakePhoto: false });
    console.debug("photoFilepath: ", photoFilepath);
    wx.showLoading({ title: '识别中，请稍候...', mask: true });

    _that.setData({
      sampleImage1Url: photoFilepath,
    })
    sampleImage1 = photoFilepath;

    await cvhelper.createImageElement(sampleImage1);
    var srcMat = await cvhelper.getSrcMat();
    var dstMat = await cvhelper.getTransform();
    cv.imshow(_that.canvasDom, dstMat);

    await recognize(_that);
    wx.hideLoading();
    console.log("gridChoosed: ", _that.data.gridChoosed);
  } catch (ex) {
    console.error("ex: ", ex);
  }
}

忽略掉行为控制代码和界面显示代码，以下代码的注释

拍照，用wx2sync包装了微信的wx.takePhoto，用promise转成同步代码，方便代码控制

var photoFilepath = await wx2sync.takePhoto(cameraContext);

async function takePhoto(cameraContext) {
    return await new Promise((resolve, reject) => {
        console.debug("cameraContext created: ", cameraContext);

        cameraContext.takePhoto({
            quality: "high",
            success: function (res) {
                console.debug("take photo: ", res);

                resolve(res.tempImagePath);
            },
            fail: (res) => {
                console.debug("take photo failed: ", res);
                reject(res);
            },
            complete: (res) => {
                console.debug("take photo complete: ", res)
            }
        }