diff --git a/.gitignore b/.gitignore index 8c2b884..78e7b54 100644 --- a/.gitignore +++ b/.gitignore @@ -1,14 +1,21 @@ -# ---> VisualStudioCode -.vscode/* -!.vscode/settings.json -!.vscode/tasks.json -!.vscode/launch.json -!.vscode/extensions.json -!.vscode/*.code-snippets +node_modules +.DS_Store +dist +*.local +package-lock.json -# Local History for Visual Studio Code -.history/ - -# Built Visual Studio Code Extensions -*.vsix +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +# Editor directories and files +.history +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..69b7569 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020 makeit.vip + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 5422569..638b161 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,15 @@ -# makeit-scan +# 扫描解析二维码 / 条形码 +> 整个 Demo 项目采用的是 Vue3 + Vite + zxing + Ant Design Vue 构建。实现 Web 浏览器端拉起摄像头，扫描二维码 / 条形码并对其解析的功能。（注意：iPhone 系列的手机，除了 Safari 自带浏览器外，其它任何的浏览器是没有权限配置网站是否可用摄像头的，所以采用折中的解决方案，拉起摄像头后拍照进行识别）。 -:sparkling_heart: H5 + Web 浏览器端拉起摄像头，实现二维码 / 条形码的扫描并且解析（iPhone 系列手机，除了 Safari 自带浏览器支持外，其它任何浏览器不支持设置网站权限，采用折中的拍照识别方式，识别正确率比较低）:boom: 注：并未做比较全面的测试 :stuck_out_tongue_winking_eye: \ No newline at end of file +> Demo 体验地址：[https://scan.makeit.vip/](https://scan.makeit.vip/) + +## 证书 +> `localhost` 支持调试，需要用其它任何域名来调试的话，先配置 `https`（我测试的时候用的是 `letsencrypt` + `docker` 来生成免费的 `https` 证书的） + +## 运行 +``` +git clone https://github.com/lirongtong/miitvip-canvas-demo.git +cd miitvip-scan-demo +npm install +npm run dev +``` \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..914d25b --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + + + + + H5 二维码 / 条形码扫描解析 - Powered By makeit.vip. + + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..3bf6e12 --- /dev/null +++ b/package.json @@ -0,0 +1,25 @@ +{ + "name": "miitvip-scan-demo", + "version": "0.1.0", + "author": { + "url": "https://www.makeit.vip", + "name": "lirongtong", + "email": "lirongtong@hotmail.com", + "github": "https://github.com/lirongtong" + }, + "scripts": { + "dev": "vite", + "build": "vite build" + }, + "dependencies": { + "@zxing/library": "^0.18.3", + "ant-design-vue": "^2.0.0-rc.8", + "vue": "^3.0.5" + }, + "devDependencies": { + "@vue/compiler-sfc": "^3.0.5", + "less": "^3.12.2", + "less-loader": "^7.0.2", + "vite": "^1.0.0-rc.13" + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..db431ad Binary files /dev/null and b/public/favicon.ico differ diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..be4fbe0 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,150 @@ + + + \ No newline at end of file diff --git a/src/app.ts b/src/app.ts new file mode 100644 index 0000000..b02c680 --- /dev/null +++ b/src/app.ts @@ -0,0 +1,6 @@ +import {createApp} from 'vue' +import App from './App.vue' +import antd from './modules' +import './index.css' + +createApp(App).use(antd).mount('#app') diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..221d6a7 --- /dev/null +++ b/src/index.css @@ -0,0 +1,61 @@ +#app { + width: 100%; + height: 100%; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.logo { + width: 120px; + border-radius: 8px; +} + +.video { + width: 320px; + border: 1px solid #dbdbdb; + margin: 16px; + border-radius: 4px; +} + +.result { + letter-spacing: 2px; +} + +.ant-modal-title, +.ant-modal-body p { + letter-spacing: 2px; +} + +.photograph { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + margin-top: 16px; + position: relative; +} + +.ant-btn { + border-radius: 4px; + letter-spacing: 2px; +} + +.file { + position: absolute; + left: 0; + top: 0; + width: 290px; + height: 40px; + opacity: 0; + cursor: pointer; +} + +#preview { + width: 320px; + border-radius: 8px; + margin: 16px; + margin-top: 16px; +} \ No newline at end of file diff --git a/src/modules.ts b/src/modules.ts new file mode 100644 index 0000000..848c8ae --- /dev/null +++ b/src/modules.ts @@ -0,0 +1,16 @@ +import { App } from 'vue' +import 'ant-design-vue/lib/message/style/index.less' +import 'ant-design-vue/lib/modal/style/index.less' +import 'ant-design-vue/lib/button/style/index.less' +import { message, Modal, Button } from 'ant-design-vue' + +const components = { message, Modal, Button } as any +const antd = { + install(app: App) { + app.config.globalProperties.$message = message + Object.keys(components).forEach((name) => { + app.use(components[name]) + }) + } +} +export default antd \ No newline at end of file diff --git a/src/shims.d.ts b/src/shims.d.ts new file mode 100644 index 0000000..5cafa41 --- /dev/null +++ b/src/shims.d.ts @@ -0,0 +1,5 @@ +declare module '*.vue' { + import { defineComponent } from 'vue' + const component: ReturnType + export default component +} \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..68c3863 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,10 @@ +import { SharedConfig } from "vite"; + +const config: SharedConfig = { + cssPreprocessOptions: { + less: { + javascriptEnabled: true + } + } +} +export default config \ No newline at end of file