LiYanan2004

前言

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

兼容模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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 崩溃

使用方法

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

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

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

css 部分(个人处理方法)

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

1
:root{color-scheme: dark light}

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

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

3、没了。

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

css 部分(官方处理方法)

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

1
:root{ color-scheme: dark light }

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

1
2
3
4
5
6
7
8
9
10
11
12
@media(prefers-color-scheme: light) { 
// 浅色模式中网页内容的颜色值
:root{
--color: #fff;
}
}
@media(prefers-color-scheme: dark) {
// 深色模式中网页内容的颜色值
:root{
--color: #000;
}
}

3、在需要时引用变量,像这样:

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

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

HTML 部分

1、在 head 中引入

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

javaScript 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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 ~

 海报

 评论


字数统计:25k  |   正在计算...
总访问量为 次 。