コードは直接コピーできます。調整機能は uniapp プラグインを使用しますhttps://ext.dcloud.net.cn/plugin?id=10333
<template>
<view>
<camera class="camera-box" style="position: relative;" resolution="high" @initdone="initdone" :flash='flash'
:style='{width:windowWidth+"px",height:windowHeight+"px"}'>
<cover-view class='camerabgImage'>
<cover-view class="active">
<cover-image class="active-image"
src="https://oss.nodekoa.com/blog/2020/12/0716073342969601272.png"></cover-image>
<cover-view class="text">将OE码放入框内</cover-view>
</cover-view>
<cover-view @click="openlamp"
style="display: flex;flex-direction: column;justify-content: center;align-items: center;color: #fff;margin-top: 130%;">
<cover-image class="img" src="../../static/off.png" v-if="flash=='off'"></cover-image>
<cover-image class="img" src="../../static/open.png" v-else></cover-image>
<!-- <cover-view class="font" style="font-size: 26rpx;margin-top: 20rpx;">打开闪光灯</cover-view> -->
</cover-view>
<cover-view
style="position: absolute;bottom: 0;left: 0;width: 100%;height: 300rpx;display: flex;z-index:999;">
<cover-view class="icon_flex" @click="takealbum">
<cover-image class="img" src="../../static/photo.png"></cover-image>
<cover-view class="font"> 相册 </cover-view>
</cover-view>
<cover-view class="icon_flex" @click="takePhoto">
<cover-view
style="display: flex;background-color: #fff;align-items: center;justify-content: center;padding: 30rpx;border-radius: 50%;">
<cover-image class="img" src="../../static/camera.png"></cover-image>
</cover-view>
<cover-view class="font">拍照</cover-view>
</cover-view>
<cover-view class="icon_flex" @click="manualInput">
<cover-image class="img" src="../../static/pen.png"></cover-image>
<cover-view class="font"> 手动输入 </cover-view>
</cover-view>
</cover-view>
</cover-view>
</camera>
<canvas class="cop" canvas-id="image-canvas"></canvas>
</view>
</template>
<script>
export default {
data() {
return {
flash: 'off',
screenWidth: '', //屏幕宽度
setData: {
src: ''
},
scanShow: true,
isShowImage: false,
windowWidth: '',
windowHeight: '',
canvas: '',
img: '',
maxZoom: null,
currentZoom: 1,
}
},
onLoad() {
let getWindowInfo = uni.getWindowInfo()
this.screenWidth = getWindowInfo.screenWidth
console.log(this.screenWidth, '---------53');
this.authorize()
let {
windowWidth,
windowHeight
} = uni.getSystemInfoSync()
this.windowWidth = windowWidth
this.windowHeight = windowHeight
},
onShow() {
this.currentZoom = 1
},
methods: {
manualInput() {
uni.navigateTo({
url: `/pages_my/tally/getOe?false=false`
})
},
inputCode(e) {
console.log(e, '---------90');
},
//关闭输入框
handleCancel() {
this.showInput = false;
this.inputVal = ""
},
handleConfirm() {
let _value = this.inputVal.replace(/[, ]/g, '')
if (_value && _value.length === 17) {
uni.redirectTo({
url: `/pages_my/shoplist?vinCode=${_value}`
});
this.inputVal = ""
this.showInput = false
} else {
uni.showToast({
title: '请输入正确的17位VIN码！',
icon: 'none',
duration: 3000
});
}
},
//开灯
openlamp() {
let flag = this.flash
if (flag == 'off') {
this.flash = 'on'
} else {
this.flash = 'off'
}
},
// 授权
authorize() {
uni.getSetting({
success: (res) => {
if (!res.authSetting['scope.camera']) {
uni.authorize({
scope: 'scope.camera',
success: () => {
console.log('授权成功');
},
fail: () => {
uni.showModal({
title: '提示',
content: '尚未进行授权，该功能将无法使用',
success: (res1) => {
if (res1.confirm) {
uni.openSetting({
success: (setting) => {
// console.log(setting);
if (setting
.authSetting[
'scope.camera'
]) {
uni.showToast({
title: '授权成功!'
})
} else {
uni.showToast({
title: '授权失败!',
icon: 'none'
})
setTimeout(
() => {
uni.navigateBack()
}, 1000
)
}
}
})
} else {
uni.navigateBack()
}
}
})
}
})
}
}
})
},
takePhoto() {
uni.showLoading({
title: '上传中...'
})
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.loadTempImagePath(res.tempImagePath)
}
})
},
chooseImg() {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album'], //这要注意，camera掉拍照，album是打开手机相册
success: (res) => {
this.loadTempImagePath(res.tempImagePath)
}
})
},
takealbum() {
const that = this
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ["album"],
success: (res) => {
uni.navigateTo({
url: "/pages_my/tally/imageCrop?img=" + res.tempFilePaths[0]
})
console.log(res.tempFilePaths[0], '-------------175')
}
});
},
chooseImage(sourceType) {
const that = this
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: [sourceType],
success: (res) => {
console.log(res, '-------------175');
if (res.tempFiles[0]['size'] > 20 * 1024 * 1024) {
uni.showToast({
title: '图片大小不能超过20M',
icon: 'none',
duration: 3000
});
return;
}
uni.showLoading({
title: '上传中...'
})
if (res.tempFiles[0]['size'] < 5 * 1024 * 1024) {
that.loadTempImagePath(res.tempFilePaths[0])
} else {
uni.compressImage({
src: res.tempFilePaths[0],
quality: 80,
success: res => {
that.loadTempImagePath(res.tempFilePath, that)
}
})
}
}
});
},
initdone({
detail: {
maxZoom
}
}) {
// 最大放大倍速
this.maxZoom = maxZoom / 2
},
setZoom(zoom) {
console.log(this.currentZoom);
const ctx = uni.createCameraContext()
if (zoom) {
// console.log(this.maxZoom);
if (this.currentZoom >= this.maxZoom) return false
// console.log(size);
ctx.setZoom({
zoom: this.currentZoom += 1
})
} else {
if (this.currentZoom <= 1) return false
// console.log(size);
ctx.setZoom({
zoom: this.currentZoom -= 1
})
}
},
//rpx转px
rpx2px(rpx) {
const screenWidth = uni.getSystemInfoSync().screenWidth
return (screenWidth * Number.parseInt(rpx)) / 750
},
loadTempImagePath(url) {
let {
windowWidth,
windowHeight
} = uni.getSystemInfoSync()
let x = (windowWidth - this.rpx2px(300)) / 2
let y = windowHeight * 0.2
let testc = uni.createCanvasContext('image-canvas');
testc.drawImage(url, 0, 0, windowWidth, windowHeight)
testc.draw(false, () => {
uni.canvasToTempFilePath({
x: 0,//设置图片x轴起始点
y: y,//设置图片y轴起始点
width: this.windowWidth,
height: this.rpx2px(300),
canvasId: 'image-canvas',
fileType: 'jpg',
quality: 1,
complete: (res2) => {
uni.uploadFile({
url: `${process.uniEnv.baseUrl}/baseVinCode/getVinCodeByImg`,
filePath: res2.tempFilePath,
name: 'file',
formData: {
file: res2.tempFilePath
},
header: {
'Content-Type': 'multipart/form-data',
},
success: response => {
let res = JSON.parse(response.data.toString("utf8"));
const {
data,
code
} = res;
let value = {
img: res2.tempFilePath,
font: data
}
console.log(res2.tempFilePath,'----------截取后的图片地址');
if (code == 200) {
uni.navigateTo({
url: `/pages_my/tally/getOe?data=${JSON.stringify(value)}`
})
} else {
uni.showToast({
title: res.msg,
duration: 3000
});
}
},
complete: () => {
uni.hideLoading()
}
});
}
})
})
}
},
}
</script>
<style>
page {
/* background-color: red; */
/* background: #fbfbfb; */
height: auto;
overflow: hidden;
}
</style>
<style scoped lang="scss">
.yulan-box {
position: relative;
width: 100%;
height: 100%;
}
.img {
width: 60rpx;
height: 60rpx;
}
.icon_flex {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.font {
font-size: 26rpx;
color: #fff;
margin-top: 30rpx;
}
}
.beat {
width: 33%;
position: absolute;
bottom: 0rpx;
left: 100rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 24rpx;
font-weight: 400;
color: #ffffff;
.beatImg {
width: 88rpx;
height: 88rpx;
margin-bottom: 30rpx;
}
}
.cop {
width: 100%;
height: 100vh;
}
.camera-box {
position: relative;
width: 100vw;
height: 300rpx;
}
.camera-box .camerabgImage {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0
}
.camera-box .camerabgImage .active {
box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 20%;
left: 0;
right: 0;
}
.camera-box .camerabgImage .active-image {
box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.2);
// align-items: center;
display: block;
width: 100%;
height: 300rpx;
}
.camera-box .camerabgImage .text {
text-align: center;
// margin-top: 56rpx;
// line-height: 100rpx;
font-size: 28rpx;
font-weight: 400;
color: #fff;
line-height: 100rpx
}
.camera-box .camerabgImage .btn {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
background: #fff;
border: 6rpx solid#fff;
position: absolute;
bottom: 0;
left: 0;
}
.camera-box .camerabgImage .btn .button {
width: 102rpx;
height: 102rpx;
border-radius: 50%;
border: 4rpx solid#000
}
.camera-box .camerabgImage .btn2 {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
background: #fff;
border: 6rpx solid#fff;
position: absolute;
bottom: 0;
left: 0;
}
.camera-box .camerabgImage .btn2 .button2 {
width: 102rpx;
height: 102rpx;
border-radius: 50%;
border: 4rpx solid#000
}
.abc {
position: absolute;
width: 20rpx;
height: 20rpx;
background: #000000;
left: 117.9px;
top: 209.6px;
}
</style>