在 swiftUI 中扫描文稿

前言

配置兼容模块在 swiftUI 中扫描文稿。

兼容模块

import SwiftUI
import UIKit
import VisionKit

struct documentScanner: UIViewControllerRepresentable {

    @Binding var isShown: Bool
    @Binding var image: UIImage // Change the type to "[UIImage]" if you want to import Multi-Images

    typealias UIViewControllerType = VNDocumentCameraViewController

    func makeCoordinator() -> documentScanner.Coordinator {
        return Coordinator(isShown: $isShown, image: $image)
    }

    // Renders the view controller as a struct through SwiftUI
    func makeUIViewController(context: UIViewControllerRepresentableContext<documentScanner>) -> VNDocumentCameraViewController {
        let documentCameraViewController = VNDocumentCameraViewController()

        documentCameraViewController.delegate = context.coordinator

        return documentCameraViewController
    }

    func updateUIViewController(_ uiViewController: VNDocumentCameraViewController, context: UIViewControllerRepresentableContext<documentScanner>) {
        // update UIView, if needed
    }

    class Coordinator: NSObject, UINavigationControllerDelegate, VNDocumentCameraViewControllerDelegate {

        @Binding var isShown: Bool
        @Binding var image: UIImage // Change the type to "[UIImage]" if you want to import Multi-Images

        init(isShown: Binding<Bool>, image: Binding<UIImage>) {
            _isShown = isShown
            _image = image
        }

        func documentCameraViewController(_ controller: VNDocumentCameraViewController, didFinishWith scan: VNDocumentCameraScan) {
            // perform when user click "Finish" Button

            // import the first image
            image = scan.imageOfPage(at: 0)

            // if you want to import Multi-Images, use this one
            /*
            for page in 0 ..< scan.pageCount {
                image += scan.imageOfPage(at: page)
            }*/

            isShown = false
        }

        func documentCameraViewControllerDidCancel(_ controller: VNDocumentCameraViewController) {
            isShown = false
        }
    }
}

声明摄像头权限

在 info.plist 中加入一条：Privacy - Camera Usage Description 填写描述

⚠️：缺少此步会导致 App 崩溃

使用方法

documentScanner(isShown: /* 是否调起，类型为 Binding<Bool> */, image: /* 扫描完成后的图片，类型为 Binding<UIImage> */)

1、分别适配了 深色模式 和 浅色模式 的 css 或其他样式文件¹

2、可编写 css 和 javascript 的代码编辑器（推荐使用 atom）

css 部分（个人处理方法）

1、声明你的网站支持的外观

:root{color-scheme: dark light}

2、分别声明 浅色模式 和 深色模式 的外观 css

@media(prefers-color-scheme: light) { // 浅色模式的 css 写在这里 }
@media(prefers-color-scheme: dark) { // 深色模式的 css 写在这里 }

3、没了。

⚠️ ：以上是我个人的方法，适用于 css 较多的网站

css 部分（官方处理方法）

1、声明你的网站支持的外观

:root{ color-scheme: dark light }

2、分别声明 浅色模式 和 深色模式 的 css 中的颜色

@media(prefers-color-scheme: light) { 
  // 浅色模式中网页内容的颜色值
  :root{ 
    --color: #fff;
  }
}
@media(prefers-color-scheme: dark) { 
  // 深色模式中网页内容的颜色值
  :root{ 
    --color: #000;
  }
}

3、在需要时引用变量，像这样：

html{ color: var(--color); }

我个人认为这样比较复杂，所以我直接用的第一种

HTML 部分

1、在 head 中引入

 // 上面放已有的一条 css，一定要放在上面！！，可以加个 title="normal"
<link rel="stylesheet" href="/* 动态深色模式的 css 引用地址 */" title="dynamic">

javaScript 部分

<script src="https://cdn.jsdelivr.net/gh/LiYanan2004/LiYanan2004.github.io/website/js/browser_check.min.js" ></script>
<script>
  var info = new Browser()
  if ((info.os == "Mac OS" && compare(info.osVersion,"10.14.4")) || (info.os == "iOS" && compare(info.osVersion,"13.0"))) { // This is iOS OR macOS and supported dynamic
      console.log("This Device supported dynamic color scheme");
      setStyle('dynamic')
  }

  function compare(curV,reqV){
   if(curV && reqV){
      //将两个版本号拆成数字
      var arr1 = curV.split('.'),
          arr2 = reqV.split('.');
      var minLength=Math.min(arr1.length,arr2.length),
          position=0,
          diff=0;
      while(position<minLength && ((diff=parseInt(arr1[position])-parseInt(arr2[position]))==0)){
          position++;
      }
      diff=(diff!=0)?diff:(arr1.length-arr2.length);
      //若curV大于reqV，则返回true
      return diff>0;
   } else {
      //输入为空
      console.log("版本号不能为空");
      return false;
   }
}

function setStyle(title){
   var i, links;
   links = document.getElementsByTagName("link");
   for (i = 0; links[i]; i++) {
       if (links[i].getAttribute("rel").indexOf("style") != -1 && links[i].getAttribute("title")) {
           links[i].disabled = true;
           if (links[i].getAttribute("title").indexOf(title) != -1) links[i].disabled = false;
       }
   }
}
</script>

⚠️：以上内容放在 body 中，不用担心性能问题，性能影响几乎为 0

本地测试

用自己的方法在本地测试一下吧！

附录

1、Hexo + material-x 快速生成深色模式和浅色模式的方法：liyanan2004.github.io/2019/Enable_Dark_mode_in_your_blog_with_material-x/（Hexo 的其他主题也可参考）

Enjoy it ~