html+js实现系统拍照上传功能
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="Keywords" content=""/><meta name="Description" content=""/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta http-equiv="Cache-Control" content="no-transform"/><meta http-equiv="Cache-Control" content="no-siteapp"/><meta http-equiv="content-language" content="zh-CN"/><meta name="applicable-device" content="pc"><meta name="mobile-agent" content="format=html5;url=http: "/><link rel="alternate" media="only screen and(max-width: 640px)" href=" "/><title>新闻推荐系统</title><link rel="stylesheet" type="text/css" href="file/css/pc_common.css"/><style>#capture{position: absolute;right: 190px;bottom: -40px;}#video{position: absolute;right: 0;top: 0;}#img{position: absolute;left: 0;top: 0;}.auto{position: absolute;left: 50%;top: 50%;height: 320px;margin-top: -160px;}#sure{position: absolute;left: 210px;bottom: -40px;}button{cursor: pointer;margin: 0 auto;border: 1px solid #f0f0f0;background: #5CACEE;color: #FFF;width: 100px;height: 36px;line-height: 36px;border-radius: 8px;text-align: center;/*禁止选择*/-webkit-touch-callout: none; /* iOS Safari */-webkit-user-select: none; /* Chrome/Safari/Opera */-khtml-user-select: none; /* Konqueror */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* Internet Explorer/Edge */user-select: none; /* Non-prefixed version, currently not supported by any browser */}</style>
</head><body>
<div id="rrapp" v-cloak><!--header--><div class="city_wrap"><div class="city"><div style="text-align: left;width: 50%;float: left;"><a href="index.html">基于web的新闻推荐系统</a></div><div style="text-align: right;width: 50%;float: right;" id="myuser"><a href="login.html">登录</a>| <a href="login.html">注册</a></div></div></div><!--logo and search--><div class="logo_search i_logo_search"><a href="index.html" class="fl"><img src="file/img/pc/logo.png"/></a><div class="fr"><input type="text" name="q" value="" placeholder="请输入搜索关键词" class="keywords" v-model="search_key"@keyup.enter="search_index"/><input type="submit" name="submit" value="" class="ser_btn"/><a href="paizhao.html">拍照搜索</a></div></div><!--nav--><div class="nav_wrap"><div class="change nav"><ul class="clearbox"><li class="a"><h2>校园趣事</h2><div class="link"><a href="list.html?type=1" class="cg">学园风光</a><a href="list.html?type=1" class="cg">教学资讯</a></div></li><li class="b"><h2>文化传承</h2><div class="link"><a href="list.html?type=2">言传身教</a><a href="list.html?type=2">创新建设</a><a href="list.html?type=2">国学文化</a><a href="list.html?type=2" class="cg">礼义廉耻</a><a href="list.html?type=2" class="cg">忠孝仁爱</a><a href="list.html?type=2" class="cg">爱国教育</a></div></li><li class="c"><h2>健康教育</h2><div class="link"><a href="list.html?type=3">体育锻炼</a><a href="list.html?type=3">心理健康</a><a href="list.html?type=3">素质涵养</a><a href="list.html?type=3">心理辅导</a></div></li><li class="d"><h2>少年国学</h2><div class="link"><a href="list.html?type=4" class="cg">考古专业</a><a href="list.html?type=4" class="cg">唐代文化</a><a href="list.html?type=4" class="cg">宋朝诗词</a><a href="list.html?type=4" class="cg">元朝文欢</a><a href="list.html?type=4">明清</a></div></li><li class="e"><h2>才智未来</h2><div class="link"><a href="list.html?type=5">创新能力</a><a href="list.html?type=5">机器学习</a></div></li></ul></div></div>
</div><div class="auto"><video id="video" width="480" height="320" autoplay></video><canvas id="canvas" width="480" height="320" style="display: none;"></canvas><img src="1714447612266.jpg" id="img" width="480" height="320" style="margin-left: 20px;"><div><button id="capture" title="点击进行拍照">拍照</button></div><div><button id="sure" title="是否用这张图片进行验证">确认</button></div>
</div>
<!--footer-->
<script src="file/js/libs/jquery-1.11.0.min.js"></script>
<script src="file/js/libs/jquery.SuperSlide.2.1.1.js"></script>
<script src="file/js/libs/jquery.nicescroll.js"></script>
<script src="file/js/libs/pc_common.js"></script>
<script type="text/javascript" src="file/js/libs/vue.min.js"></script>
<script type="text/javascript" src="file/js/ref/comm.js"></script>
<!--<script type="text/javascript" src="file/js/ref/recomm.js"></script>-->
<script type="text/javascript" src="file/js/ref/index.js"></script>
<script>var file ,stream;//访问用户媒体设备的兼容方法function getUserMedia(constraints, success, error) {if (navigator.mediaDevices.getUserMedia) {//最新的标准APInavigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);} else if (navigator.webkitGetUserMedia) {//webkit核心浏览器navigator.webkitGetUserMedia(constraints,success, error)} else if (navigator.mozGetUserMedia) {//firfox浏览器navigator.mozGetUserMedia(constraints, success, error);} else if (navigator.getUserMedia) {//旧版APInavigator.getUserMedia(constraints, success, error);}}let video = document.getElementById('video');let canvas = document.getElementById('canvas');let context = canvas.getContext('2d');function success(stream) {//兼容webkit核心浏览器let CompatibleURL = window.URL || window.webkitURL;//将视频流设置为video元素的源console.log(stream);stream = stream;//video.src = CompatibleURL.createObjectURL(stream);video.srcObject = stream;video.play();}function error(error) {console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);}if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {//调用用户媒体设备, 访问摄像头getUserMedia({video : {width: 480, height: 320}}, success, error);} else {alert('不支持访问用户媒体');}// base64转文件document.getElementById('capture').addEventListener('click', function () {context.drawImage(video, 0, 0, 480, 320);// 获取图片base64链接var image = canvas.toDataURL('image/png');// 定义一个imgvar img = document.getElementById("img");//设置属性和src//img.id = "imgBoxxx";img.src = image;//将图片添加到页面中//document.body.appendChild(img);function dataURLtoFile(dataurl, filename) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}file = new File([u8arr], filename, {type: mime});return new File([u8arr], filename, {type: mime});}console.log(dataURLtoFile(image, 'aa.png'));})document.getElementById('sure').addEventListener('click', function () {window.location.href="search.html?keywords=''"var formData = new FormData();formData.append("file",file);$.ajax({type: "POST", // 数据提交类型url: "***********", // 发送地址data: formData, //发送数据async: true, // 是否异步processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用datacontentType: false,success:function(data){if(data.code === 200){console.log(`${data.message}`);}else{console.log(`${data.message}`);}},error:function(e){self.$message.warning(`${e}`);//console.log("不成功"+e);}});stream.getTracks()[0].stop();//结束关闭流})
</script>
</body>
</html>
</body>
</html>
【知识分享】html+js实现系统拍照上传功能
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/5317.shtml
如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！相关文章
kube-prometheus部署到 k8s 集群
文章目录 **修改镜像地址****访问配置****修改 Prometheus 的 service****修改 Grafana 的 service****修改 Alertmanager 的 service****安装****Prometheus验证****Alertmanager验证****Grafana验证****卸载****Grafana显示时间问题** 或者配置ingress添加ingress访问grafana…
)
JAVA前端快速入门基础_javascript入门(02)
写在前面:本文用于快速学会简易的JS，仅做扫盲和参考作用
1.JavaScript函数
什么是函数:执行特定任务的代码块
1.1定义：
使用function来进行定义(类似于python里面的def 或者java和c里面的void，int这些返回类型开头)。定义规则如下:
func…
物联网D1——建工程，配环境，注意事项
1.STLink、JLink、USB等驱动配置keil环境配置——下载芯片对应型号的包——导入库函数源文件、Core内核文件、对应芯片系统文件。 2.学会看芯片手册 3.在STM32微控制器中，CRH通常指的是控制寄存器高位（Control Register High）。 在这种情况下…
Linux修改文件权限命令 chmod
【例子引入】
以下面命令为例：
chmod 777 Random.py
当写入下面名为Random.py的代码后： 如果直接运行，会显示权限不够 当输入 chmod 777 Random.py 更改权限后，才能够正常运行 在终端中输入 这条命令是关于Linux或Unix-like系…
C++——数据结构stack，queue，priority_queue
栈的底层与使用 1.堆栈是计算机科学中的一种抽象数据类型，只允许在有序的线性数据集合的一端（称为堆栈顶端，top）进行插入数据（PUSH）和删除数据（POP）的运算。 2.特点：stac…
![[二叉树] 二叉树的前中后三序遍历#知二求一](http://pic.xiahunao.cn/[二叉树] 二叉树的前中后三序遍历#知二求一)
[二叉树] 二叉树的前中后三序遍历#知二求一
标题：[二叉树] 二叉树的前中后三序遍历#知二求一
水墨不写bug （图片来源于网络） 正文开始： 其实这一类题就是考察对二叉树的结构理解，此类题目的二叉树一般通过数组传入，我们只需根据二叉树的就够特点对数…
JAVA同城服务美容美发到店服务上门服务系统源码微信小程序+微信公众号+H5+APP
随着科技的飞速发展，互联网和移动互联网已经渗透到我们生活的方方面面，同城服务美容美发到店服务上门服务系统应运而生，为整个行业带来了巨大的变革和无限的可能。该系统的重要性和优势不言而喻，对于行业发展和用户需求的影响深远…
基于YOLOV8+Pyqt5无人机航拍太阳能电池板检测系统
1.YOLOv8的基本原理
YOLOv8是一种前沿的目标检测技术，它基于先前YOLO版本在目标检测任务上的成功，进一步提升了性能和灵活性，在精度和速度方面都具有尖端性能。在之前YOLO 版本的基础上，YOLOv8 引入了新的功能和优化，…
字符串函数、内存函数——补充
目录
前言
1、strchr函数
1-1 函数介绍
1-1-1 函数功能
1-1-2 函数原型
1-1-3 函数参数
1-1-4 所属库
1-1-5 函数返回值
1-2 函数简单使用
1-3 函数使用场景
1-4 函数的使用总结
1-4-1 注意事项
2、strrchr函数
2-1 函数介绍
2-1-1 函数功能
2-1-2 函数原型
2…
【18】JAVASE-IO专题【从零开始学JAVA】
Java零基础系列课程-JavaSE基础篇 Lecture：波哥 Java 是第一大编程语言和开发平台。它有助于企业降低成本、缩短开发周期、推动创新以及改善应用服务。如今全球有数百万开发人员运行着超过 51 亿个 Java 虚拟机，Java 仍是企业和开发人员的首选开发平台。…
时间序列分析-无模型
本节内容介绍了无模型的时间序列分析方法，包括时间序列作趋势图、逐年分解、时间序列分解、直方图、ACF与PACF图，主要是作图。 首先导入数据和对应的库：
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import se…
与Apollo共创生态：让汽车更聪明，让出行更简单
目录 前言Apollo X 企业解决方案Studio X 企业协同开发工具链Apollo开放平台携手伙伴共创生态Apollo开发平台生态共创计划 前言 百度2013年开始布局自动驾驶，2017年推出全球首个自动驾驶开放平台Apollo。目前百度Apollo已经在自动驾驶、智能汽车、智能地图等领域拥有…
Spring6 当中 Bean 的生命周期的详细解析：有五步，有七步，有十步
1. Spring6 当中 Bean 的生命周期的详细解析：有五步，有七步，有十步 文章目录 1. Spring6 当中 Bean 的生命周期的详细解析：有五步，有七步，有十步每博一文案1.1 什么是 Bean 的生命周期1.2 Bean 的生命周期 …
Flask 3 保姆级教程（一）：快速上手
一、创建项目
PyCharm 中新建项目 创建完成后会出现这么个项目 以下是代码解析：
# 导入了 Flask 类
from flask import Flask# 创建了一个 Flask web 应用的实例，并将其赋值给变量 app
# __name__ 是一个特殊的 Python 变量，它表示当前模块…
第49期|GPTSecurity周报
GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区，集成了生成预训练Transformer（GPT）、人工智能生成内容（AIGC）以及大语言模型（LLM）等安全领域应用的知识。在这里，您可以找…
Unity Android（十） 适配Android14系统
开发环境：Unity2019.4 Android14平板 AndroidStudio2020.3.1 本文仅作个人记录，方便后续回顾。 请求权限 MANAGE_EXTERNAL_STORAGE 参考链接：https://blog.csdn.net/qq_34765850/article/details/136045431 将应用更新为以 Android …
变电站自动化控制系统应用案例分析
变电站自动化控制系统介绍
变电站自动化控制系统用于大中型企业变电站项目，这类企业变压器多，日耗电量大。把多个变压器集中到一个电器平台上，集中管理分析，优化厂区用电管理，从而达到集中控制、集中分析、集中管理的…
VOS系统录音文件REC转MP3，REC录音转WAV与WAV转MP3具体项目中实现方式，以及占用空间变化！
前面讲解了VOS3000系统的录音REC转MP3的安装步骤，不清楚的，可以移步这里查看：http://t.csdnimg.cn/OXNT9 或者 点击这里查看安装步骤，下面继续讲下他们的使用方法，以及实际项目中的运用，首先我们需要明确我…
Android中的屏幕刷新机制（动画视频形象说明机制）
一，刷新率和帧率，60hz和60fps的区别
在Android系统中，刷新率和帧率是两个不同的概念，它们各自在显示过程中扮演着不同的角色。以下是对它们的详细解释：
刷新率，单位是Hz，是指屏幕在一秒内刷新…
C++学习第九课：指针的精髓与应用
C学习第九课：指针的精髓与应用
1. 指针基础
指针是一种存储内存地址的变量，它指向另一个变量的内存位置。
int var 10;
int *ptr &var; // ptr是指向var的指针2. 声明和初始化指针
声明指针时在类型前加星号(*)。
int *ptr; // 声明一个整型指…