中山网络公司网站建设,手机ui设计,网站开发网站有哪些,网站解析ip地址产品提了这样一个需求#xff1a; 移动端拍照上传后图片不保存在用户设备上#xff0c;试了好几种方法#xff0c;uni-file-picker、uni.chooseImage、input type‘file’#xff0c;安卓手机都会默认把图片保存在手机#xff0c;于是各种查资料#xff0c;找到了以下方法…产品提了这样一个需求 移动端拍照上传后图片不保存在用户设备上试了好几种方法uni-file-picker、uni.chooseImage、input type‘file’安卓手机都会默认把图片保存在手机于是各种查资料找到了以下方法已验证可行。
1、获取摄像头权限并显示视频流 使用navigator.mediaDevices.getUserMedia()获取摄像头权限并将视频流显示在video标签中。 2、拍照 使用HTML的canvas标签来截取当前摄像头的画面并将其转换为图片格式。 3、上传图片 使用uniapp的uni.uploadFile()方法将图片上传到服务器。
view classcontainerbutton clickinitCamera打开摄像头/buttonbutton clicktakePhoto拍照/button
/view
data() {return {stream: null,videoElement: null}}
mounted() {this.createVideoElement()
},methods: {createVideoElement() {// 一定要用createElement创建 video和canvas 元素否则用不了其中的方法this.videoElement document.createElement(video)this.videoElement.setAttribute(autoplay, )this.videoElement.setAttribute(muted, )this.videoElement.setAttribute(playsinline, )// 添加到 DOM 中const container document.querySelector(.container)container.appendChild(this.videoElement)},async initCamera() {if (this.stream) {this.stopCamera()}try {const constraints { video: { facingMode: environment }}const stream await navigator.mediaDevices.getUserMedia(constraints)this.stream streamthis.videoElement.srcObject stream} catch (error) {console.error(Error accessing camera:, error)}},// 关闭摄像头stopCamera() {if (this.stream) {this.stream.getTracks().forEach(track track.stop())this.stream nullthis.videoElement.srcObject null}},takePhoto() {this.captureImage()this.stopCamera()},async captureImage() {const canvas document.createElement(canvas)canvas.width this.videoElement.clientWidthcanvas.height this.videoElement.clientHeightconst ctx canvas.getContext(2d)ctx.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height)// 转化成base64的编码格式const dataUrl canvas.toDataURL(image/jpeg)this._uploadFileBase64(dataUrl)},// 上传到远程地址_uploadFileBase64(imgUrl) {uploadFileBase64(imgUrl).then(response {if (response response.SavePath) {console.log(response.SavePath)this.$uniToast(上传成功)} else {this.$uniToast(上传失败)}})}
}
