h5页面调用手机，pda摄像头

文章目录

前言
1、实现步骤
二、input属性介绍
总结

前言

做一个仓储管理系统，对收货和验收作业完成时可以上传附件，h5页面，项目：vue3.0，vant等架构。

上传附件，需要拍照上传，调项目中统一的接口进行附件上传

1、实现步骤

使用input标签实现移动端调用摄像头，通过设置capture="camera"属性直接打开相机
支持图片预览功能，通过FileReader读取文件并显示在img标签中
兼容iOS和Android设备，自动调用系统默认相机应用
无需额外权限配置，直接在H5页面中实现拍照功能
代码简洁高效，仅需HTML和JavaScript实现核心功能
通过change事件监听文件选择，实时更新图片预览

支持图片旋转自动修正，兼容不同设备拍摄方向

javascript 复制代码

// html
   <div class="image_content">
      <div>
      // 图片预览
        <div class="previewImageList" v-if="previewImageList.length > 0">
          <i class="previewImage" v-for="(item, index) in previewImageList" :key="index">
            <img :src="item" alt="Preview" class="preview-image" />
            <Icon class="delete_image" @click="handleDeleteImage(index)" name="close" />
          </i>
        </div>
      </div>
      <div class="add_image">
        <input ref="fileInput" type="file" accept="image/*" capture="environment" style="display: none" @change="handleImageUpload" />
        <div class="camera-icon" @click="triggerFileInput">
          <Icon name="plus" />
        </div>
      </div>
      <div class="image_footer">
        <Button style="width: 46%" size="small" type="primary" @click="handleSuccess">提交</Button>
      </div>

javascript 复制代码

const fileInput = ref(null);
// 触发文件输入框
const triggerFileInput = () => {
  fileInput.value.click();
};
// 处理上传的图片
let imgUrlList = ref<string[]>([]);
const handleImageUpload = async (event) => {
  const file = event.target.files[0]; // 图片信息
  if (file) {
    let params = {
      file: file,
      filename: file.name,
      data: { biz: 'receive', jeditor: '1' },
    };
    // 项目中封装的上传接口
    uploadFile(params, uploadSuccess);
    //  URL.createObjectURL(file)
    previewImageList.value.push(URL.createObjectURL(file));
  }
};
 // 删除图片
function handleDeleteImage(index) {
   previewImageList.value.splice(index, 1);
   imgUrlList.value.splice(index, 1);
 }

css 复制代码

 // css 样式
 .previewImageList {
   		display: flex;
		min-height: 200px;
	   	.previewImage {
		      display: inline-block;
		      width: 150px;
		      height: 150px;
		      border-radius: 10px;
		      margin-right: 20px;
		      border: solid 1px #f7f9fe;
		      position: relative;
		    }
	    img {
	      display: inline-block;
	      width: 100%;
	      height: 100%;
	      top: 0;
	      right: 0;
	    }
	    .delete_image {
	      position: absolute;
	    }
  }
  .add_image {
    display: flex;
    justify-content: center;
  }
    .image_content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 40px;
  }
  .image_footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

二、input属性介绍

_<input>标签是 HTML 中用于创建表单输入控件的核心元素，它允许用户在网页上输入数据。‌

1.基本概念

作用‌：定义一个输入字段，用户可以在其中输入文本、选择选项或上传文件等。‌
位置‌：通常嵌套在_<form>标签内，用于收集用户信息。‌
‌关键特性‌：这是一个空标签（自闭合标签），其行为和外观主要由 type 属性决定。‌
2.属性

属性	值	描述
accept	audio/* video/* image/* MIME_type	规定通过文件上传来提交的文件的类型。 (只针对type="file")
alt	text	定义图像输入的替代文本。 (只针对type="image")
autocomplete	on off	autocomplete 属性规定 _<input> 元素输入字段是否应该启用自动完成功能。
autofocus	autofocus	属性规定当页面加载时 _<input> 元素应该自动获得焦点。
checked	checked	checked 属性规定在页面加载时应该被预先选定的 _<input> 元素。 (只针对 type="checkbox" 或者 type="radio")
disabled	disabled	disabled 属性规定应该禁用的 _<input> 元素。
form	form_id	form 属性规定元素所属的一个或多个表单。
formaction	URL	属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
formmethod	get post	定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
max	number date	属性规定 _<input> 元素的最大值。
maxlength	number	属性规定 _<input> 元素中允许的最大字符数。
min	number date	属性规定 _<input>元素的最小值。
multiple	multiple	属性规定允许用户输入到 _<input> 元素的多个值
name	text	name 属性规定 _<input> 元素的名称。
pattern	regexp	pattern 属性规定用于验证 _<input> 元素的值的正则表达式。
placeholder	text	placeholder 属性规定可描述输入 _<input> 字段预期值的简短的提示信息。
readonly	readonly	readonly 属性规定输入字段是只读的。
required	required	属性规定必需在提交表单之前填写输入字段。
size	number	size 属性规定以字符数计的 _<input> 元素的可见宽度。
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")
step	number	step 属性规定 _<input> 元素的合法数字间隔。
value	text	指定 _<input> 元素 value 的值。
width	pixels	width 属性规定 _<input> 元素的宽度。 (只针对type="image")
height	pixels	规定 _<input>元素的高度。(只针对type="image")
type	下标详情介绍	type 属性规定要显示的 _<input> 元素的类型。

type 属性的一些常用值及其典型场景

text值	描述	示例场景
text	单行文本输入框（默认类型）	输入姓名、地址或搜索关键词
password	密码输入框，输入内容以点号隐藏	登录或注册时输入密码
email	电子邮件地址输入框，浏览器会自动验证格式	注册时输入邮箱
url	URL 地址输入框，浏览器会验证是否为有效链接	输入个人网站或资料链接
number	数值输入框，可包含数字和上下箭头	输入年龄、电话号码
date / time	日期或时间选择器	选择出生日期或预约时间
checkbox	复选框，允许用户选择多个选项	选择兴趣爱好或服务条款
radio	单选按钮，用户从一组选项中选择一个	选择性别或支付方式
file	文件上传控件	上传头像、证件或文档
submit / reset	提交按钮和重置按钮	提交表单或清空已输入内容
button	普通按钮，通常用于执行 JavaScript 操作	自定义按钮功能

基本语法示例

html 复制代码

<form action="/submit" method="post">
  <!-- 文本输入 -->
  姓名: <input type="text" name="username" placeholder="请输入您的姓名"><br><br>
  
  <!-- 密码输入 -->
  密码: <input type="password" name="password"><br><br>
  
  <!-- 电子邮件输入 -->
  邮箱: <input type="email" name="email"><br><br>
  
  <!-- 单选按钮 -->
  性别: 
  <input type="radio" name="gender" value="male" id="male">
  <label for="male">男</label>
  <input type="radio" name="gender" value="female" id="female">
  <label for="female">女</label><br><br>
   支付方式: 
  <input type="radio" name="gender" value="payMethodWX" id="payMethodWX">
  <label for="male">微信</label>
  <input type="radio" name="gender" value="payMethodZFB" id="payMethodZFB">
  <label for="female">支付宝</label><br><br>
  <input type="radio" name="gender" value="payMethodBank" id="payMethodBank">
  <label for="female">银行卡</label><br><br>
  <!-- 复选框 -->
  兴趣爱好:
  <input type="checkbox" name="hobby" value="sports" id="sports">
  <label for="sports">体育</label>
  <input type="checkbox" name="hobby" value="music" id="music">
  <label for="music">音乐</label><br><br>
  
  <!-- 文件上传 -->
  上传照片: <input type="file" name="photo"><br><br>
  
  <!-- 提交按钮 -->
  <input type="submit" value="提交">
  <input type="reset" value="重置">
</form>

基本语法示例

‌表单验证‌：浏览器会根据 type 属性（如 email、url）提供基本的输入验证，但复杂验证需结合 JavaScript 或后端处理。‌‌
可访问性‌：建议使用 _<label> 标签关联 _<input> 元素，以提升网页的可访问性。‌‌
‌现代用法‌：对于更复杂的输入需求（如带建议的文本框），可以结合

总结

注意事项：

‌HTTPS环境‌：出于安全考虑，getUserMedia和某些的capture功能只能在HTTPS环境下工作。如果你在本地开发，可以使用localhost或通过某些工具（如live-server）在HTTP环境下测试。

‌浏览器兼容性‌：确保你的目标浏览器支持这些API。虽然现代浏览器（如Chrome, Firefox, Safari等）都支持这些功能，但在开发时最好还是检查一下Can I use。

‌权限请求‌：当用户首次尝试访问摄像头或麦克风时，浏览器会显示一个权限请求对话框，用户需要授权才能继续。

通过以上方法，你可以在H5页面中实现调用手机摄像头和相册的功能。

h5页面 调用手机，pda摄像头

文章目录

前言

1、实现步骤

二、input属性介绍

总结

h5页面调用手机，pda摄像头