H5拍照小技巧

最新推荐文章于 2024-08-03 22:32:10 发布

臧小川

最新推荐文章于 2024-08-03 22:32:10 发布

阅读量952

点赞数

分类专栏： HTML

臧小川

本文链接：https://blog.csdn.net/chuan0106/article/details/120076084

版权

H5拍照文件上传优化 inputtype=file卡顿 CSS动画相机权限

关键词由CSDN通过智能技术生成

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

需求1. 手机拍照只能选择拍照的照片不能选择手机相册的照片

<a href="javascript:;" onclick="document.getElementById('myFile').click()">添加图片</a>

需求2. 解决input[type=file]打开时慢，卡顿问题

<input id="myFile" type="file" name="image" accpet="image/gif,image/png,image/jpeg,image/jpg,image/bmp"
    style=" display: none;" capture="camera">

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>H5拍照</title>
  <style>
    h1 h2 h3 h4 h5 h6 {
      line-height: 2 !important;
      margin: 30px 0 15px !important;
    }

    .postTitle {
      color: pink;
      font-size: 30px;
      font-family: 'Microsoft Yahei', Helvetica, Arial, sans-serif;
      font-weight: 500;
      padding: 0;
      background-image: none;
      display: inline-block;
      transform-origin: center center;
      animation-name: shake-slow;
      animation-duration: 5s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      animation-delay: 0s;
      animation-play-state: running;
    }

    a {
      text-decoration: none;
      padding-bottom: 2px;
      color: #e06c75;
    }

    a:hover {
      color: #67c3e5;
    }

    @keyframes shake-slow {
      0% {
        transform: translate(0px, 0px) rotate(0deg);
      }

      2% {
        transform: translate(6px, -7px) rotate(2.5deg);
      }

      4% {
        transform: translate(8px, -8px) rotate(2.5deg);
      }

      6% {
        transform: translate(1px, -8px) rotate(-3.5deg);
      }

      8% {
        transform: translate(-3px, 4px) rotate(-0.5deg);
      }

      10% {
        transform: translate(0px, -3px) rotate(1.5deg);
      }

      12% {
        transform: translate(-1px, 2px) rotate(0.5deg);
      }

      14% {
        transform: translate(6px, 6px) rotate(-1.5deg);
      }

      16% {
        transform: translate(-7px, 4px) rotate(-0.5deg);
      }

      18% {
        transform: translate(7px, 8px) rotate(-3.5deg);
      }

      20% {
        transform: translate(-6px, 2px) rotate(1.5deg);
      }

      22% {
        transform: translate(9px, 5px) rotate(-1.5deg);
      }

      24% {
        transform: translate(7px, -2px) rotate(0.5deg);
      }

      26% {
        transform: translate(-7px, -10px) rotate(-0.5deg);
      }

      28% {
        transform: translate(-10px, -8px) rotate(-1.5deg);
      }

      30% {
        transform: translate(8px, 4px) rotate(0.5deg);
      }

      32% {
        transform: translate(0px, 4px) rotate(1.5deg);
      }

      34% {
        transform: translate(-8px, 6px) rotate(-0.5deg);
      }

      36% {
        transform: translate(-5px, 7px) rotate(1.5deg);
      }

      38% {
        transform: translate(-4px, -4px) rotate(-1.5deg);
      }

      40% {
        transform: translate(9px, 4px) rotate(-1.5deg);
      }

      42% {
        transform: translate(9px, -5px) rotate(2.5deg);
      }

      44% {
        transform: translate(-5px, -4px) rotate(-2.5deg);
      }

      46% {
        transform: translate(7px, -7px) rotate(1.5deg);
      }

      48% {
        transform: translate(-5px, 8px) rotate(0.5deg);
      }

      50% {
        transform: translate(9px, 1px) rotate(-1.5deg);
      }

      52% {
        transform: translate(-9px, -5px) rotate(-3.5deg);
      }

      54% {
        transform: translate(-2px, 9px) rotate(1.5deg);
      }

      56% {
        transform: translate(6px, -1px) rotate(1.5deg);
      }

      58% {
        transform: translate(-6px, 0px) rotate(-0.5deg);
      }

      60% {
        transform: translate(3px, 1px) rotate(1.5deg);
      }

      62% {
        transform: translate(5px, -7px) rotate(-0.5deg);
      }

      64% {
        transform: translate(9px, 2px) rotate(2.5deg);
      }

      66% {
        transform: translate(6px, 0px) rotate(-2.5deg);
      }

      68% {
        transform: translate(5px, -4px) rotate(-2.5deg);
      }

      70% {
        transform: translate(-8px, 5px) rotate(-2.5deg);
      }

      72% {
        transform: translate(-6px, -2px) rotate(0.5deg);
      }

      74% {
        transform: translate(-3px, 7px) rotate(-3.5deg);
      }

      76% {
        transform: translate(-7px, -8px) rotate(-3.5deg);
      }

      78% {
        transform: translate(-1px, -2px) rotate(2.5deg);
      }

      80% {
        transform: translate(8px, 6px) rotate(-2.5deg);
      }

      82% {
        transform: translate(-2px, -9px) rotate(2.5deg);
      }

      84% {
        transform: translate(8px, -10px) rotate(-0.5deg);
      }

      86% {
        transform: translate(-6px, 0px) rotate(2.5deg);
      }

      88% {
        transform: translate(-1px, 9px) rotate(-3.5deg);
      }

      90% {
        transform: translate(-7px, 8px) rotate(1.5deg);
      }

      92% {
        transform: translate(-10px, -8px) rotate(0.5deg);
      }

      94% {
        transform: translate(-8px, 6px) rotate(1.5deg);
      }

      96% {
        transform: translate(4px, -9px) rotate(2.5deg);
      }

      98% {
        transform: translate(-4px, 9px) rotate(0.5deg);
      }
    }
  </style>
</head>

<body>
  <input id="myFile" type="file" name="image" accpet="image/gif,image/png,image/jpeg,image/jpg,image/bmp"
    style=" display: none;" capture="camera">
  <div class="box">
    <h1 class="postTitle">
      <a href="javascript:;" onclick="document.getElementById('myFile').click()">添加图片</a>
    </h1>
  </div>

</body>

</html>