ps: 急いで送りました。今のところ最適化できていないところが多く、冗長なコードもあります。プロジェクトが完了したら時間をかけてゆっくり修正していきます。参考にしていただけます。修正する場合はメッセージを残して交換してください。
エフェクトのプレビュー
1. アイデア
uniappのカメラタグはアプリ側で対応していないので、別の方法を探す必要があるが、Baiduを一巡した結果、navigator.mediaDevices.getUserMediaを使ってビデオストリームを取得し、それを<video>タグにレンダリングして画面を表示し、クリックして写真を撮る際に、<video>の内容を直接キャンバスに設定し、base64の内容を取得して<img>タグに割り当てるというアイデアを思いついた。
WebViewを使ってHTMLページを埋め込み、HTMLページ上でカメラ取得の処理を行い、動画の上層にマスクを追加すればOKです。
ローカル Web ページと関連リソース (js、css、その他のファイル) は、上記のパスに従って保存する必要があります。面倒な場合は、すべての静的リソースを直接リンクに変換してページにインポートすることもできます。
2、コード
WebView で、navigateTo、navigateBack、switchTab、reLaunch、redirectTo などを使用してアプリの他のページに切り替える必要がある場合は、script タグに uni.web-view.js を導入する必要があります (ダウンロードするにはここをクリックしてください)。デモンストレーションの便宜上、HTML ファイルの <script> タグ内に直接記述しました。ただし、body タグの外側に記述する必要があります。
ユニSDK
<script type="text/javascript">
! function(e, n) {
"object" == typeof exports && "undefined" != typeof module ? module.exports = n() : "function" == typeof define &&
define.amd ? define(n) : (e = e || self).uni = n()
}(this, (function() {
"use strict";
try {
var e = {};
Object.defineProperty(e, "passive", {
get: function() {
!0
}
}), window.addEventListener("test-passive", null, e)
} catch (e) {}
var n = Object.prototype.hasOwnProperty;
function i(e, i) {
return n.call(e, i)
}
var t = [];
function r() {
return window.__dcloud_weex_postMessage || window.__dcloud_weex_
}
var o = function(e, n) {
var i = {
options: {
timestamp: +new Date
},
name: e,
arg: n
};
if (r()) {
if ("postMessage" === e) {
var o = {
data: [n]
};
return window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessage(o) : window
.__dcloud_weex_.postMessage(JSON.stringify(o))
}
var a = {
type: "WEB_INVOKE_APPSERVICE",
args: {
data: i,
webviewIds: t
}
};
window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessageToService(a) : window
.__dcloud_weex_.postMessageToService(JSON.stringify(a))
}
if (!window.plus) return window.parent.postMessage({
type: "WEB_INVOKE_APPSERVICE",
data: i,
pageId: ""
}, "*");
if (0 === t.length) {
var d = plus.webview.currentWebview();
if (!d) throw new Error("plus.webview.currentWebview() is undefined");
var s = d.parent(),
w = "";
w = s ? s.id : d.id, t.push(w)
}
if (plus.webview.getWebviewById("__uniapp__service")) plus.webview.postMessageToUniNView({
type: "WEB_INVOKE_APPSERVICE",
args: {
data: i,
webviewIds: t
}
}, "__uniapp__service");
else {
var u = JSON.stringify(i);
plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat(
"WEB_INVOKE_APPSERVICE", '",').concat(u, ",").concat(JSON.stringify(t), ");"))
}
},
a = {
navigateTo: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.url;
o("navigateTo", {
url: encodeURI(n)
})
},
navigateBack: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.delta;
o("navigateBack", {
delta: parseInt(n) || 1
})
},
switchTab: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.url;
o("switchTab", {
url: encodeURI(n)
})
},
reLaunch: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.url;
o("reLaunch", {
url: encodeURI(n)
})
},
redirectTo: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.url;
o("redirectTo", {
url: encodeURI(n)
})
},
getEnv: function(e) {
r() ? e({
nvue: !0
}) : window.plus ? e({
plus: !0
}) : e({
h5: !0
})
},
postMessage: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
o("postMessage", e.data || {})
}
},
d = /uni-app/i.test(navigator.userAgent),
s = /Html5Plus/i.test(navigator.userAgent),
w = /complete|loaded|interactive/;
var u = window.my && navigator.userAgent.indexOf(["t", "n", "e", "i", "l", "C", "y", "a", "p", "i", "l",
"A"
].reverse().join("")) > -1;
var g = window.swan && window.swan.webView && /swan/i.test(navigator.userAgent);
var v = window.qq && window.qq.miniProgram && /QQ/i.test(navigator.userAgent) && /miniProgram/i.test(
navigator.userAgent);
var c = window.tt && window.tt.miniProgram && /toutiaomicroapp/i.test(navigator.userAgent);
var m = window.wx && window.wx.miniProgram && /micromessenger/i.test(navigator.userAgent) &&
/miniProgram/i.test(navigator.userAgent);
var p = window.qa && /quickapp/i.test(navigator.userAgent);
var f = window.ks && window.ks.miniProgram && /micromessenger/i.test(navigator.userAgent) &&
/miniProgram/i.test(navigator.userAgent);
var l = window.tt && window.tt.miniProgram && /Lark|Feishu/i.test(navigator.userAgent);
var _ = window.jd && window.jd.miniProgram && /micromessenger/i.test(navigator.userAgent) &&
/miniProgram/i.test(navigator.userAgent);
var E = window.xhs && window.xhs.miniProgram && /xhsminiapp/i.test(navigator.userAgent);
for (var h, P = function() {
window.UniAppJSBridge = !0, document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady", {
bubbles: !0,
cancelable: !0
}))
}, b = [function(e) {
if (d || s) return window.__dcloud_weex_postMessage || window.__dcloud_weex_ ? document
.addEventListener("DOMContentLoaded", e) : window.plus && w.test(document
.readyState) ? setTimeout(e, 0) : document.addEventListener("plusready", e), a
}, function(e) {
if (m) return window.WeixinJSBridge && window.WeixinJSBridge.invoke ? setTimeout(e, 0) :
document.addEventListener("WeixinJSBridgeReady", e), window.wx.miniProgram
}, function(e) {
if (v) return window.QQJSBridge && window.QQJSBridge.invoke ? setTimeout(e, 0) : document
.addEventListener("QQJSBridgeReady", e), window.qq.miniProgram
}, function(e) {
if (u) {
document.addEventListener("DOMContentLoaded", e);
var n = window.my;
return {
navigateTo: n.navigateTo,
navigateBack: n.navigateBack,
switchTab: n.switchTab,
reLaunch: n.reLaunch,
redirectTo: n.redirectTo,
postMessage: n.postMessage,
getEnv: n.getEnv
}
}
}, function(e) {
if (g) return document.addEventListener("DOMContentLoaded", e), window.swan.webView
}, function(e) {
if (c) return document.addEventListener("DOMContentLoaded", e), window.tt.miniProgram
}, function(e) {
if (p) {
window.QaJSBridge && window.QaJSBridge.invoke ? setTimeout(e, 0) : document
.addEventListener("QaJSBridgeReady", e);
var n = window.qa;
return {
navigateTo: n.navigateTo,
navigateBack: n.navigateBack,
switchTab: n.switchTab,
reLaunch: n.reLaunch,
redirectTo: n.redirectTo,
postMessage: n.postMessage,
getEnv: n.getEnv
}
}
}, function(e) {
if (f) return window.WeixinJSBridge && window.WeixinJSBridge.invoke ? setTimeout(e, 0) :
document.addEventListener("WeixinJSBridgeReady", e), window.ks.miniProgram
}, function(e) {
if (l) return document.addEventListener("DOMContentLoaded", e), window.tt.miniProgram
}, function(e) {
if (_) return window.JDJSBridgeReady && window.JDJSBridgeReady.invoke ? setTimeout(e, 0) :
document.addEventListener("JDJSBridgeReady", e), window.jd.miniProgram
}, function(e) {
if (E) return window.xhs.miniProgram
}, function(e) {
return document.addEventListener("DOMContentLoaded", e), a
}], y = 0; y < b.length && !(h = b[y](P)); y++);
h || (h = {});
var B = "undefined" != typeof uni ? uni : {};
if (!B.navigateTo)
for (var S in h) i(h, S) && (B[S] = h[S]);
return B.webView = h, B
}));
</script>
現在の環境を判断する
// 是否是手机
function isMobile() {
let userAgentInfo = navigator.userAgent;
let mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
let mobile_flag = false;
//根据userAgent判断是否是手机
for (let v = 0; v < mobileAgents.length; v++) {
if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
mobile_flag = true;
break;
}
}
let screen_width = window.screen.width;
let screen_height = window.screen.height;
//根据屏幕分辨率判断是否是手机
if (screen_width > 325 && screen_height < 750) {
mobile_flag = true;
}
return mobile_flag;
}
ユーザー認証プロンプトボックスを強制的に呼び出す
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
$(video).show();
if ("srcObject" in video) {
video.srcObject = stream;
} else {
video.src = window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function(e) {
video.play();
};
}).catch(function(err) {
var r = confirm("是否授权使用媒体相机采集图片");
if (r == true) {
// 这里可以调用5+ API了,为了更好的兼容性,应该使用以下代码进行判断
if (window.plus) {
var cmr = plus.camera.getCamera();
setTimeout(() => {
uni.webView.redirectTo({
url: '/pagesA/ruleName/cs/cs?dataType=' + strType
});
}, 2000)
} else { // 兼容老版本的plusready事件
document.addEventListener('plusready', function() {
var cmr = plus.camera.getCamera();
setTimeout(() => {
uni.webView.redirectTo({
url: '/pagesA/ruleName/cs/cs?dataType=' + strType
});
}, 2000)
}, false);
}
} else {
uni.webView.navigateBack()//未授权返回上级页面
}
});
カメラボタンのクリックイベントを聞く
capture.addEventListener('click', function(e) {
if (!flag) {
context.drawImage(video, 50, 185, 400, 280, 50, 280, 880, 450);//裁剪图片
$(canvas).show();
$(allImg).show();
$(rightImg).show();
$(video).hide();
$(capture).text("重新拍照");
flag = true;
} else {
context.clearRect(0, 0, canvas.width, canvas.height); //清除画布,避免第二次拍照出现黑屏
$(allImg).hide();
$(video).show();
$(rightImg).hide();
$(canvas).hide();
$(capture).text("拍照");
flag = false;
}
});
アルバムから画像を選択します。Web ページは、 postMessageを通じて アプリケーションにメッセージを送信し 、<web-view>
イベント message
コールバック event.detail.data
でメッセージを受信します。
leftclImg.addEventListener('click', function(e) {
plus.gallery.pick(function(path) {
toBase64(path).then((res) => {
uni.postMessage({
data: {
action: res, // 这是从html页面传参到webview所在页面发送的数据
ress: path,
}
});
})
// console.log(path);
}, function(e) {
console.log("取消选择图片");
}, {
filter: "image"
});
});
rightImg.addEventListener('click', function(e) {
// onTorch()
sureImg()
});
アプリケーションが配置されているページはパラメータを受け入れます
message(data) {
uni.showLoading({
title: '识别中'
})
this.getAccessToken(data.detail.data[0].action, data.detail.data[0].ress) //初始化卡证识别
},
カード識別認証認証機構
// 获取AccessToken
getAccessToken(path, ress) {
let self = this
uni.request({
url: 'https://aip.baidubce.com/oauth/2.0/token',
data: {
grant_type: 'client_credentials',
client_id: self.dataObj.client_id,//自己申请的client_id
client_secret: self.dataObj.client_secret//自己申请的client_secret
},
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: (res) => {
// uploadImageBank
console.log(res, self.dataType)
if (self.dataType == 'idcard') {
self.uploadImage(path, res.data.access_token, ress)
} else if (self.dataType == 'idcardblack') {
self.uploadImage(path, res.data.access_token, ress)
} else if (self.dataType == 'bank') {
self.uploadImageBank(path, res.data.access_token, ress)
} else {
self.uploadlicense(path, res.data.access_token, ress)
uni.hideLoading()
}
},
fail(err) {
uni.hideLoading()
uni.showToast({
title: '智能识别过期,请联系管理员',
icon: 'none'
})
console.log(err)
}
})
},
キャッシュカード認識(高精度版)
uploadImageBank(path, token, ress) {
uni.request({
url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/bankcard',
data: {
image: path,
access_token: token
},
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: (res) => {
console.log(res)
uni.hideLoading()
setTimeout(() => {
uni.$emit('noticeBank', {
path: {
"tempFilePaths": [ress]
},
animal: false,
words: res.data
})
}, 300);
uni.navigateBack()
},
fail(err) {
uni.hideLoading()
uni.showToast({
title: '识别失败',
icon: 'none'
})
console.log(err)
}
})
},
IDカード認識
uploadImage(path, token, ress) {
let self = this
uni.request({
url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard',
data: {
image: path,
access_token: token,
id_card_side: 'back'
},
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: (res) => {
console.log(res)
uni.hideLoading()
setTimeout(() => {
console.log(self.dataType)
if (self.dataType == 'idcardblack') {
console.log(self.dataType)
uni.$emit('noticeblack', {
path: {
"tempFilePaths": [ress]
},
animal: false,
words: res.data
})
} else {
console.log(self.dataType)
uni.$emit('notice', {
path: {
"tempFilePaths": [ress]
},
animal: false,
words: res.data
})
}
}, 300);
uni.navigateBack()
},
fail(err) {
uni.hideLoading()
uni.showToast({
title: '识别失败',
icon: 'none'
})
console.log(err)
}
})
},
Index.html すべてのコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>调用摄像头拍照</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
// 是否是手机
function isMobile() {
let userAgentInfo = navigator.userAgent;
let mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
let mobile_flag = false;
//根据userAgent判断是否是手机
for (let v = 0; v < mobileAgents.length; v++) {
if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
mobile_flag = true;
break;
}
}
let screen_width = window.screen.width;
let screen_height = window.screen.height;
//根据屏幕分辨率判断是否是手机
if (screen_width > 325 && screen_height < 750) {
mobile_flag = true;
}
return mobile_flag;
}
/**
* @description 本地图片转base64方法(兼容APP、H5、小程序)
* @param {number} path 图片本地路径
* @returns Promise对象
*/
function toBase64(path) {
return new Promise((resolve, reject) => {
// #ifdef APP-PLUS
plus.io.resolveLocalFileSystemURL(path, (entry) => {
entry.file((file) => {
let fileReader = new plus.io.FileReader()
fileReader.readAsDataURL(file)
fileReader.onloadend = (evt) => {
let base64 = evt.target.result.split(",")[1]
resolve(base64)
}
})
})
// #endif
// // #ifdef H5
// uni.request({
// url: path,
// responseType: 'arraybuffer',
// success: (res) => {
// resolve(uni.arrayBufferToBase64(res.data))
// }
// })
// // #endif
// // #ifdef MP-WEIXIN
// uni.getFileSystemManager().readFile({
// filePath: path,
// encoding: 'base64',
// success: (res) => {
// resolve(res.data)
// }
// })
// // #endif
})
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
#capture {
font-size: 20px;
width: 180px;
height: 180px;
border-radius: 50%;
line-height: 50px;
text-align: center;
position: fixed;
bottom: 13vh;
left: 50%;
transform: translateX(-50%);
}
canvas {
width: 100%;
height: 68vh;
display: none;
}
video {
/* margin-top: 20px; */
width: 100%;
height: 100%;
}
.btmBox {
position: fixed;
bottom: 0px;
height: 30vh;
width: 100%;
background-color: black;
}
.leftImg {
position: fixed;
bottom: 15vh;
left: 10%;
width: 100px;
height: 100px;
}
.rightImg {
position: fixed;
bottom: 15vh;
right: 10%;
width: 100px;
height: 100px;
padding: 0;
}
.mb {}
.bg-img {
position: absolute;
top: 0;
width: 100%;
height: 70vh;
z-index: 99;
}
</style>
</head>
<body>
<div style="position:relative; z-index:-1">
<canvas id="canvas" width="100%"></canvas>
</div>
<!-- <img id="bgImg" src="http://192.168.3.45:8080/flm-admin/imgs/imgs/20230206/dd6d82b0eab94f728d113b2525459bda.png"
alt="" class="bg-img"> -->
<img id="bgImg" src="http://192.168.3.45:8080/flm-admin/imgs/imgs/20230210/80aca5b4e52c40e0a77b6e3ec34387ad.png"
alt="" class="bg-img">
<div class="mb">
</div>
<video id="video"></video>
<div class="btmBox">
</div>
<img class="leftImg" id="leftclImg"
src="http://192.168.3.45:8080/flm-admin/imgs/imgs/20230210/1bace6a55b0142a482811af448b909ad.png" alt="">
<!-- <img class="leftImg" id="leftclImg"
src="http://192.168.3.45:8080/flm-admin/imgs/imgs/20230206/b52cb3c9bf534238aaa32eb2b31b10f1.png" alt=""> -->
<button id="capture">拍照</button>
<!-- <img class="rightImg" id="rightclImg" src="http://192.168.3.45:8080/flm-admin/imgs/imgs/20230206/bdc836365ccf45c8aa9a0716848ae583.png" alt=""> -->
<img class="rightImg" id="rightclImg"
src="http://192.168.3.45:8080/flm-admin/imgs/imgs/20230210/4861556c9c0646d287d42575a7301c5f.png" alt="">
</body>
<!-- uniSdk -->
<script type="text/javascript">
! function(e, n) {
"object" == typeof exports && "undefined" != typeof module ? module.exports = n() : "function" == typeof define &&
define.amd ? define(n) : (e = e || self).uni = n()
}(this, (function() {
"use strict";
try {
var e = {};
Object.defineProperty(e, "passive", {
get: function() {
!0
}
}), window.addEventListener("test-passive", null, e)
} catch (e) {}
var n = Object.prototype.hasOwnProperty;
function i(e, i) {
return n.call(e, i)
}
var t = [];
function r() {
return window.__dcloud_weex_postMessage || window.__dcloud_weex_
}
var o = function(e, n) {
var i = {
options: {
timestamp: +new Date
},
name: e,
arg: n
};
if (r()) {
if ("postMessage" === e) {
var o = {
data: [n]
};
return window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessage(o) : window
.__dcloud_weex_.postMessage(JSON.stringify(o))
}
var a = {
type: "WEB_INVOKE_APPSERVICE",
args: {
data: i,
webviewIds: t
}
};
window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessageToService(a) : window
.__dcloud_weex_.postMessageToService(JSON.stringify(a))
}
if (!window.plus) return window.parent.postMessage({
type: "WEB_INVOKE_APPSERVICE",
data: i,
pageId: ""
}, "*");
if (0 === t.length) {
var d = plus.webview.currentWebview();
if (!d) throw new Error("plus.webview.currentWebview() is undefined");
var s = d.parent(),
w = "";
w = s ? s.id : d.id, t.push(w)
}
if (plus.webview.getWebviewById("__uniapp__service")) plus.webview.postMessageToUniNView({
type: "WEB_INVOKE_APPSERVICE",
args: {
data: i,
webviewIds: t
}
}, "__uniapp__service");
else {
var u = JSON.stringify(i);
plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat(
"WEB_INVOKE_APPSERVICE", '",').concat(u, ",").concat(JSON.stringify(t), ");"))
}
},
a = {
navigateTo: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.url;
o("navigateTo", {
url: encodeURI(n)
})
},
navigateBack: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.delta;
o("navigateBack", {
delta: parseInt(n) || 1
})
},
switchTab: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.url;
o("switchTab", {
url: encodeURI(n)
})
},
reLaunch: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.url;
o("reLaunch", {
url: encodeURI(n)
})
},
redirectTo: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
n = e.url;
o("redirectTo", {
url: encodeURI(n)
})
},
getEnv: function(e) {
r() ? e({
nvue: !0
}) : window.plus ? e({
plus: !0
}) : e({
h5: !0
})
},
postMessage: function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
o("postMessage", e.data || {})
}
},
d = /uni-app/i.test(navigator.userAgent),
s = /Html5Plus/i.test(navigator.userAgent),
w = /complete|loaded|interactive/;
var u = window.my && navigator.userAgent.indexOf(["t", "n", "e", "i", "l", "C", "y", "a", "p", "i", "l",
"A"
].reverse().join("")) > -1;
var g = window.swan && window.swan.webView && /swan/i.test(navigator.userAgent);
var v = window.qq && window.qq.miniProgram && /QQ/i.test(navigator.userAgent) && /miniProgram/i.test(
navigator.userAgent);
var c = window.tt && window.tt.miniProgram && /toutiaomicroapp/i.test(navigator.userAgent);
var m = window.wx && window.wx.miniProgram && /micromessenger/i.test(navigator.userAgent) &&
/miniProgram/i.test(navigator.userAgent);
var p = window.qa && /quickapp/i.test(navigator.userAgent);
var f = window.ks && window.ks.miniProgram && /micromessenger/i.test(navigator.userAgent) &&
/miniProgram/i.test(navigator.userAgent);
var l = window.tt && window.tt.miniProgram && /Lark|Feishu/i.test(navigator.userAgent);
var _ = window.jd && window.jd.miniProgram && /micromessenger/i.test(navigator.userAgent) &&
/miniProgram/i.test(navigator.userAgent);
var E = window.xhs && window.xhs.miniProgram && /xhsminiapp/i.test(navigator.userAgent);
for (var h, P = function() {
window.UniAppJSBridge = !0, document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady", {
bubbles: !0,
cancelable: !0
}))
}, b = [function(e) {
if (d || s) return window.__dcloud_weex_postMessage || window.__dcloud_weex_ ? document
.addEventListener("DOMContentLoaded", e) : window.plus && w.test(document
.readyState) ? setTimeout(e, 0) : document.addEventListener("plusready", e), a
}, function(e) {
if (m) return window.WeixinJSBridge && window.WeixinJSBridge.invoke ? setTimeout(e, 0) :
document.addEventListener("WeixinJSBridgeReady", e), window.wx.miniProgram
}, function(e) {
if (v) return window.QQJSBridge && window.QQJSBridge.invoke ? setTimeout(e, 0) : document
.addEventListener("QQJSBridgeReady", e), window.qq.miniProgram
}, function(e) {
if (u) {
document.addEventListener("DOMContentLoaded", e);
var n = window.my;
return {
navigateTo: n.navigateTo,
navigateBack: n.navigateBack,
switchTab: n.switchTab,
reLaunch: n.reLaunch,
redirectTo: n.redirectTo,
postMessage: n.postMessage,
getEnv: n.getEnv
}
}
}, function(e) {
if (g) return document.addEventListener("DOMContentLoaded", e), window.swan.webView
}, function(e) {
if (c) return document.addEventListener("DOMContentLoaded", e), window.tt.miniProgram
}, function(e) {
if (p) {
window.QaJSBridge && window.QaJSBridge.invoke ? setTimeout(e, 0) : document
.addEventListener("QaJSBridgeReady", e);
var n = window.qa;
return {
navigateTo: n.navigateTo,
navigateBack: n.navigateBack,
switchTab: n.switchTab,
reLaunch: n.reLaunch,
redirectTo: n.redirectTo,
postMessage: n.postMessage,
getEnv: n.getEnv
}
}
}, function(e) {
if (f) return window.WeixinJSBridge && window.WeixinJSBridge.invoke ? setTimeout(e, 0) :
document.addEventListener("WeixinJSBridgeReady", e), window.ks.miniProgram
}, function(e) {
if (l) return document.addEventListener("DOMContentLoaded", e), window.tt.miniProgram
}, function(e) {
if (_) return window.JDJSBridgeReady && window.JDJSBridgeReady.invoke ? setTimeout(e, 0) :
document.addEventListener("JDJSBridgeReady", e), window.jd.miniProgram
}, function(e) {
if (E) return window.xhs.miniProgram
}, function(e) {
return document.addEventListener("DOMContentLoaded", e), a
}], y = 0; y < b.length && !(h = b[y](P)); y++);
h || (h = {});
var B = "undefined" != typeof uni ? uni : {};
if (!B.navigateTo)
for (var S in h) i(h, S) && (B[S] = h[S]);
return B.webView = h, B
}));
</script>
<script type="text/javascript">
let flag = false;
let strType;
const leftclImg = document.getElementById('leftclImg');
const video = document.getElementById('video'); // video
const allImg = document.getElementById('allImg');
const rightImg = document.getElementById('rightclImg');
const capture = document.getElementById('capture');
const canvas = document.getElementById('canvas');
const bgImg = document.getElementById('bgImg');
const context = canvas.getContext('2d');
$(rightImg).hide();
$(allImg).hide();
$(video).hide();
$(bgImg).hide();
setTimeout(() => {
var url = window.location.search
if (url.indexOf("?") != -1) {
strType = url.substr(1).split("=");
$(bgImg).show();
if (strType[1] == 'idcard') {
// $(bgImg)[0].src = 'http://192.168.3.45:8080/flm-admin/imgs/imgs/20230206/908381c5ec924ecf915317581bd57425.png'
$(bgImg)[0].src =
'http://192.168.3.45:8080/flm-admin/imgs/imgs/20230210/d93c224a15234321b46d3432f38e6eca.png'
} else if (strType[1] == 'idcardblack') {
// $(bgImg)[0].src = 'http://192.168.3.45:8080/flm-admin/imgs/imgs/20230206/dd6d82b0eab94f728d113b2525459bda.png'
$(bgImg)[0].src =
'http://192.168.3.45:8080/flm-admin/imgs/imgs/20230210/80aca5b4e52c40e0a77b6e3ec34387ad.png'
} else {
// $(bgImg)[0].src = 'http://192.168.3.45:8080/flm-admin/imgs/imgs/20230206/94ec97d5d8194809876b483b8bb94419.png'
$(bgImg)[0].src =
'http://192.168.3.45:8080/flm-admin/imgs/imgs/20230210/2806513f0cf5430a91bdc54879de6e06.png'
}
}
const screen_W = window.innerWidth || document.body.clientWidth;
const screen_H = window.innerHeight || document.body.clientHeight;
canvas.width = screen_W;
canvas.height = screen_H;
if (isMobile()) {
$(canvas).css({
"width": "100%"
});
canvas.width = screen_W;
canvas.height = screen_W;
// alert("phone");
}
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function(constraints) {
vargetUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (!getUserMedia) {
returnPromise.reject(newError('getUserMedia is not implemented in this browser'));
}
return newPromise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
let constraints = {
// video: true
video: {
facingMode: {
exact: "environment"
}
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
$(video).show();
if ("srcObject" in video) {
video.srcObject = stream;
} else {
video.src = window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function(e) {
video.play();
};
}).catch(function(err) {
var r = confirm("是否授权使用媒体相机采集图片");
if (r == true) {
// 这里可以调用5+ API了,为了更好的兼容性,应该使用以下代码进行判断
if (window.plus) {
var cmr = plus.camera.getCamera();
setTimeout(() => {
uni.webView.redirectTo({
url: '/pagesA/ruleName/cs/cs?dataType=' + strType
});
}, 2000)
} else { // 兼容老版本的plusready事件
document.addEventListener('plusready', function() {
var cmr = plus.camera.getCamera();
setTimeout(() => {
uni.webView.redirectTo({
url: '/pagesA/ruleName/cs/cs?dataType=' + strType
});
}, 2000)
}, false);
}
} else {
uni.webView.navigateBack()
}
});
capture.addEventListener('click', function(e) {
if (!flag) {
// context.drawImage(video, 0, 0, canvas.width, canvas.height);
context.drawImage(video, 50, 185, 400, 280, 50, 280, 880, 450);
$(canvas).show();
$(allImg).show();
$(rightImg).show();
$(video).hide();
$(capture).text("重新拍照");
flag = true;
} else {
context.clearRect(0, 0, canvas.width, canvas.height);
$(allImg).hide();
$(video).show();
$(rightImg).hide();
$(canvas).hide();
$(capture).text("拍照");
flag = false;
}
});
leftclImg.addEventListener('click', function(e) {
plus.gallery.pick(function(path) {
toBase64(path).then((res) => {
uni.postMessage({
data: {
action: res, // 这是传的参数
ress: path,
}
});
})
// console.log(path);
}, function(e) {
console.log("取消选择图片");
}, {
filter: "image"
});
});
rightImg.addEventListener('click', function(e) {
// onTorch()
sureImg()
});
}, 500)
/**
* 确认照片
*/
function sureImg() {
// const canvas = document.getElementById('canvas');
// var image = new Image();
var imgDataSrc = canvas.toDataURL("image/png");
// compressImage(imgDataSrc, function(result) {
// allImg.src = result
// })
// allImg.src =
// console.log(imgDataSrc)
uni.postMessage({
data: {
action: imgDataSrc,
ress: imgDataSrc,
}
});
};
/**
* 压缩照片--未使用
*/
function compressImage(base64, callback) {
var targSize = 1024 * 1024 //1024KB
if (base64.length <= targSize) {
callback(base64);
// console.log("直接返回")
return
}
var newImage = new Image();
newImage.src = base64;
// newImage.setAttribute("crossOrigin", 'Anonymous'); //url为外域时需要
newImage.onload = function() {
var quality = 1 //压缩系数
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
var base64 = canvas.toDataURL("image/png", quality);
// while (base64.length > targSize) {
// quality -= 0.05;
// // console.log(base64.length + "循环压缩" + quality)
// base64 = canvas.toDataURL("image/png", quality);
// }
callback(base64); //必须通过回调函数返回,否则无法及时拿到该值
}
};
/**
* 打开闪光灯
*/
function onTorch() {
try {
var os = plus.os.name;
if ('iOS' == os) {
var device = plus.ios.invoke('AVCaptureDevice', 'defaultDeviceWithMediaType:', 'vide');
plus.ios.invoke(device, 'lockForConfiguration:', null);
plus.ios.invoke(device, 'setTorchMode:', 1);
plus.ios.invoke(device, 'setFlashMode:', 1);
plus.ios.invoke(device, 'unlockForConfiguration');
} else {
var main = plus.android.runtimeMainActivity();
var camera = main.getSystemService('camera');
var ids = plus.android.invoke(camera, 'getCameraIdList');
for (var i = 0; i < ids.length; i++) {
var c = plus.android.invoke(camera, 'getCameraCharacteristics', ids[i]);
var available = plus.android.invoke(c, 'get', plus.android.getAttribute(c,
'FLASH_INFO_AVAILABLE'));
var facing = plus.android.invoke(c, 'get', plus.android.getAttribute(c, 'LENS_FACING'));
if (null != available && available && null != facing && 1 == facing) {
plus.android.invoke(camera, 'setTorchMode', ids[i], true);
}
}
}
} catch (e) {
console.error(e, 'error @onTorch!!');
}
}
/**
* 关闭闪光灯
*/
function offTorch() {
try {
var os = plus.os.name;
if ('iOS' == os) {
var device = plus.ios.invoke('AVCaptureDevice', 'defaultDeviceWithMediaType:', 'vide');
plus.ios.invoke(device, 'lockForConfiguration:', null);
plus.ios.invoke(device, 'setTorchMode:', 0);
plus.ios.invoke(device, 'setFlashMode:', 0);
plus.ios.invoke(device, 'unlockForConfiguration');
} else {
var main = plus.android.runtimeMainActivity();
var camera = main.getSystemService('camera');
var ids = plus.android.invoke(camera, 'getCameraIdList');
for (var i = 0; i < ids.length; i++) {
var c = plus.android.invoke(camera, 'getCameraCharacteristics', ids[i]);
var available = plus.android.invoke(c, 'get', plus.android.getAttribute(c,
'FLASH_INFO_AVAILABLE'));
var facing = plus.android.invoke(c, 'get', plus.android.getAttribute(c, 'LENS_FACING'));
if (null != available && available && null != facing && 1 == facing) {
plus.android.invoke(camera, 'setTorchMode', ids[i], false);
}
}
}
} catch (e) {
console.error('error @offTorch!!');
}
}
</script>
</html>
アプリケーションページのコード
<template>
<view style="width: 100%;height: 100vh;background-color: black;overflow: hidden;">
<web-view ref="webview" :src="'/hybrid/html/index.html?type='+dataType" @message="message"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
dataType: 'idcard',
dataObj: {
client_id: ' ',//自己申请的
client_secret: ' ',
}
}
},
onShow() {
},
onLoad(e) {
this.dataType = e.dataType
},
methods: {
// 获取AccessToken
getAccessToken(path, ress) {
let self = this
uni.request({
url: 'https://aip.baidubce.com/oauth/2.0/token',
data: {
grant_type: 'client_credentials',
client_id: self.dataObj.client_id,
client_secret: self.dataObj.client_secret
},
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: (res) => {
// uploadImageBank
console.log(res, self.dataType)
if (self.dataType == 'idcard') {
self.uploadImage(path, res.data.access_token, ress)
} else if (self.dataType == 'idcardblack') {
self.uploadImage(path, res.data.access_token, ress)
} else if (self.dataType == 'bank') {
self.uploadImageBank(path, res.data.access_token, ress)
} else {
self.uploadlicense(path, res.data.access_token, ress)
uni.hideLoading()
}
},
fail(err) {
uni.hideLoading()
uni.showToast({
title: '智能识别过期,请联系管理员',
icon: 'none'
})
console.log(err)
}
})
},
// 银行卡识别(高精度版)
uploadImageBank(path, token, ress) {
uni.request({
url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/bankcard',
data: {
image: path,
access_token: token
},
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: (res) => {
console.log(res)
uni.hideLoading()
setTimeout(() => {
uni.$emit('noticeBank', {
path: {
"tempFilePaths": [ress]
},
animal: false,
words: res.data
})
}, 300);
uni.navigateBack()
},
fail(err) {
uni.hideLoading()
uni.showToast({
title: '识别失败',
icon: 'none'
})
console.log(err)
}
})
},
// 营业执照识别Business license
uploadlicense(path, token, ress) {
let self = this
uni.request({
url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/business_license',
data: {
image: path,
access_token: token,
},
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded',
},
success: (res) => {
uni.hideLoading()
self.$emit('end', {
path: ress,
animal: false,
words: res.data
})
uni.navigateBack()
},
fail(err) {
uni.hideLoading()
uni.showToast({
title: '识别失败',
icon: 'none'
})
console.log(err)
}
})
},
// 身份证识别
uploadImage(path, token, ress) {
let self = this
uni.request({
url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard',
data: {
image: path,
access_token: token,
id_card_side: 'back'
},
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: (res) => {
console.log(res)
uni.hideLoading()
setTimeout(() => {
console.log(self.dataType)
if (self.dataType == 'idcardblack') {
console.log(self.dataType)
uni.$emit('noticeblack', {
path: {
"tempFilePaths": [ress]
},
animal: false,
words: res.data
})
} else {
console.log(self.dataType)
uni.$emit('notice', {
path: {
"tempFilePaths": [ress]
},
animal: false,
words: res.data
})
}
}, 300);
uni.navigateBack()
},
fail(err) {
uni.hideLoading()
uni.showToast({
title: '识别失败',
icon: 'none'
})
console.log(err)
}
})
},
// 从webview获取参数
message(data) {
uni.showLoading({
title: '识别中'
})
// console.log(data.detail.data.action);
// console.log(data.detail.data[0].action);
// console.log(data.detail.data[0].ress);
// uni.redirectTo({
// url: '/pagesA/ruleName/ruleName'
// })
this.getAccessToken(data.detail.data[0].action, data.detail.data[0].ress)
},
}
};
</script>