效果
源码
< template> < view style = " overflow : hidden; " > < camera device-position = " back" flash = " auto" class = " camera" > < cover-view class = " text-white padding water-mark" > < cover-view class = " " > {{ address }}</ cover-view> < cover-view class = " margin-top-sm" > {{ date }} {{ time }}</ cover-view> </ cover-view> < cover-view class = " camera-btn" @click = " takePhoto" > </ cover-view> < cover-view class = " flex justify-between align-center photos-bar" v-if = " imgList.length > 0" > < cover-view class = " photos-swiper" > < cover-view @click = " ViewImage(index)" class = " margin-right-xs imgBox" v-for = " (item,index) in imgList" :key = " index" > < cover-image class = " imgItem" :src = " item.src" mode = " aspectFill" > </ cover-image> < cover-view class = " del-icon" @tap.stop = " DelImg" > ❌</ cover-view> </ cover-view> </ cover-view> < cover-view @click = " reportBtn" class = " report-btn" > 上报({{ imgList.length }})</ cover-view> </ cover-view> </ camera> < canvas :style = " { width: w + 'px', height: h + 'px' }" canvas-id = " canvas-photo" > </ canvas> </ view>
</ template> < script> export default { data ( ) { return { w : '' , h : '' , photoMax : 4 , date : "⏱️2024-08-15" , time : "10:10:00" , address : '📍北京 · 石景山' , imgList : [ ] } } , onReady ( ) { } , onShow ( ) { wx. startDeviceMotionListening ( { success : ( e ) => { console. log ( "监听设备方向:" , e) ; wx. onDeviceMotionChange ( ( res ) => { console. log ( "设备方向:" , res) const alpha = res. alpha; const beta = res. beta; const gamma = res. gamma; console. clear ( ) if ( Math. abs ( beta) < 10 && Math. abs ( gamma) < 10 ) { console. log ( "正竖屏" ) ; } else if ( Math. abs ( beta) > 170 && Math. abs ( gamma) < 10 ) { console. log ( "倒竖屏" ) ; } else if ( Math. abs ( beta) < 10 && Math. abs ( gamma - 90 ) < 10 ) { console. log ( "右横屏" ) ; } else if ( Math. abs ( beta) < 10 && Math. abs ( gamma + 90 ) < 10 ) { console. log ( "左横屏" ) ; } } ) ; } } ) } , watch : { } , methods : { takePhoto ( ) { if ( this . imgList. length === this . photoMax) { return uni. showToast ( { icon : "error" , title : ` 最多可拍 ${ this . photoMax} 张 ` } ) ; } const that = this ; const ccc = uni. createCameraContext ( ) ; ccc. takePhoto ( { quality : 'high' , success : ( res ) => { console. log ( "拍照:" , res) ; that. createWatermark ( res. tempImagePath) ; } } ) ; } , createWatermark ( image ) { const that = this ; uni. getImageInfo ( { src : image, success : res => { that. w = res. width / 3 ; that. h = res. height / 3.01 ; const ctx = uni. createCanvasContext ( 'canvas-photo' ) ; ctx. drawImage ( image, 0 , 0 , that. w, that. h) ; ctx. setFontSize ( 12 ) ; ctx. setFillStyle ( '#FFFFFF' ) ; const textToWidth = that. w * 0.03 ; ctx. fillText ( '全易' , textToWidth, that. h * 0.9 ) ; ctx. setFontSize ( 10 ) ; ctx. fillText ( that. address, textToWidth, that. h * 0.98 ) ; ctx. fillText ( ` ${ that. date} ${ that. time} ` , textToWidth, that. h * 0.94 ) ; ctx. draw ( false , ( ) => { setTimeout ( ( ) => { uni. canvasToTempFilePath ( { canvasId : 'canvas-photo' , success : ctf => { console. log ( ctf. tempFilePath) ; this . imgList. push ( { src : ctf. tempFilePath} ) console. log ( this . imgList) ; } } ) ; } , 1000 ) ; } ) ; } } ) ; } , ViewImage ( index ) { uni. previewImage ( { current : index, urls : this . imgList. map ( item => { return item. src} ) } ) ; } , DelImg ( e ) { uni. showModal ( { title : '删除提醒' , content : '确定要删除这张照片吗?' , success : res => { if ( res. confirm) { this . imgList. splice ( e. currentTarget. dataset. index, 1 ) console. log ( this . imgList) } } } ) } , reportBtn ( ) { this . imgList = [ ] ; uni. showToast ( { title : "处理成功" } ) ; } , } }
</ script> < style scoped lang = " scss" > .camera { width : 100vw; height : 100vh; } .water-mark { } .camera-btn { width : 120rpx; height : 120rpx; line-height : 120rpx; border : 6rpx #FFFFFF solid; border-radius : 50%; padding : 8rpx; position : absolute; left : calc ( 50% - 60rpx) ; bottom : 210rpx; &::after { content : " " ; display : block; width : 89%; height : 89%; position : absolute; top : 5%; left : 5%; border-radius : 50%; background-color : #FFFFFF; } } .photos-bar { width : 100%; height : 170rpx; box-sizing : border-box; padding : 20rpx 30rpx 40rpx; position : absolute; bottom : 0; left : 0; background-color : rgba ( 0, 0, 0, .8) ; .photos-swiper { width : 80%; overflow-x : auto; height : -webkit-fill-available; .imgBox { width : 110rpx; height : 110rpx; position : relative; display : inline-block; .del-icon { position : absolute; right : 0; top : 0; padding : 2px; background-color : rgba ( 0, 0, 0, 0.5) ; } .imgItem { width : 110rpx; height : 110rpx; } } } .report-btn { height : 68rpx; line-height : 68rpx; text-align : center; color : #FFFFFF; box-sizing : border-box; padding : 0rpx 20rpx; border-radius : 10rpx; background-color : #2157FF; } } #canvas-photo { position : fixed; top : -999999px; }
</ style>