移动端H5实现自定义拍照界面

news2024/11/17 1:57:09

一、实现思路

手机端 H5 实现自定义拍照界面也可以使用 MediaDevices API 和 <video> 标签来实现。

  • 首先，使用 MediaDevices.getUserMedia() 方法获取摄像头媒体流，并将其传递给 <video> 标签进行渲染。

  • 接着，使用 HTML 的 <canvas> 标签来截取当前摄像头的画面，通过 <canvas> 上的 getContext('2d') 方法来绘制。

  • 最后，使用 canvas.toDataURL() 方法将图像转换为 base64 格式，可以通过将其保存到本地或发送到服务器来存储照片。

但是需要注意的是，在手机端，调用摄像头需要在 HTTPS 或 localhost 下访问，还需要用户事先进行授权。

且在手机端可能会有些浏览器对于 getUserMedia 有所限制，需要额外兼容性处理。且手机端的实现需要考虑屏幕的方向，在绘制截图时需要根据不同的屏幕方向调整画布尺寸。在手机端，为了让用户能够在页面中手动切换摄像头，需要检测手机端设备是否有多个摄像头，在有多个摄像头时，提供给用户切换摄像头的选项。此外，需要进行一些兼容性处理，以便在不同浏览器和手机设备上正常工作。同时，需要考虑手机端的交互体验，例如提供给用户切换摄像头和调整照片尺寸的选项。对于一些高级功能，例如人脸检测和识别，美颜，以及其他高级图像处理功能可以使用第三方库，如 openCV.js，tracking.js，face-api.js 等来实现。

总之，通过使用 MediaDevices API 和 <video> 标签在手机端实现自定义拍照界面是可行的，但是需要注意的点比桌面端多一些。虽然在手机端实现自定义拍照界面有一定的挑战，但是通过使用 MediaDevices API 和相关第三方库，还有经验丰富的开发人员在这个问题上是有解决方案的。

二、实现思路的框架示例代码

<video id="camera" width="640" height="480" autoplay></video>
<button id="invoking" onclick="invokingCamera">invoking Camera</button>
<button id="snapshot" onclick="takeSnapshot">Take snapshot</button>

使用 MediaDevices.getUserMedia() 方法获取摄像头媒体流，并将其传递给 <video> 标签进行渲染。

// 调用摄像头
function invokingCamera() {
  // 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。

  // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
  if (navigator.mediaDevices === undefined) {
    navigator.mediaDevices = {};
  }

  // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
  // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
  if (navigator.mediaDevices.getUserMedia === undefined) {
    navigator.mediaDevices.getUserMedia = function (constraints) {
      // 首先，如果有getUserMedia的话，就获得它
      const getUserMedia =
        navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia;

      // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
      if (!getUserMedia) {
        return Promise.reject(
          new Error("getUserMedia is not implemented in this browser")
        );
      }

      // 否则，为老的navigator.getUserMedia方法包裹一个Promise
      return new Promise(function (resolve, reject) {
        getUserMedia.call(navigator, constraints, resolve, reject);
      });
    };
  }

  // 手机可视区域宽度（请通过相关API获取真实宽度）
  const windowWidth = 375;
  // 手机可视区域高度（请通过相关API获取真实高度）
  const windowHeight = 700;

  const constraints = {
    audio: false,
    video: {
      // 前置摄像头
      facingMode: "user",
      // 该属性相当于手机端的高
      width: Math.max(windowWidth, windowHeight) - 120, // 减去 120 用于在页面底部放置拍照等功能按钮
      // 该属性相当于手机端的宽
      height: Math.min(windowWidth, windowHeight),
    },
  };

  navigator.mediaDevices
    .getUserMedia(constraints)
    .then(function (stream) {
      const video = document.querySelector("camera");
      // 旧的浏览器可能没有srcObject
      if ("srcObject" in video) {
        video.srcObject = stream;
      } else {
        // 防止在新的浏览器里使用它，应为它已经不再支持了
        video.src = window.URL.createObjectURL(stream);
      }
      video.onloadedmetadata = function (e) {
        video.play();
      };
    })
    .catch(function (err) {
      console.log(err.name + ": " + err.message);
    });
}

使用 HTML 的 <canvas> 标签来截取当前摄像头的画面，通过 <canvas> 上的 getContext('2d') 方法来绘制。

function takeSnapshot() {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const video = document.querySelector("video");
  canvas.width = Math.min(video.videoWidth, video.videoHeight);
  canvas.height = Math.max(video.videoWidth, video.videoHeight);
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

  // ****** 镜像处理 ******
  function getPixel(imageData, row, column) {
    const uint8ClampedArray = imageData.data;
    const width = imageData.width;
    const height = imageData.height;
    const pixel = [];
    for (let i = 0; i < 4; i++) {
      pixel.push(uint8ClampedArray[row * width * 4 + column * 4 + i]);
    }
    return pixel;
  }

  function setPixel(imageData, row, column, pixel) {
    const uint8ClampedArray = imageData.data;
    const width = imageData.width;
    const height = imageData.height;
    for (let i = 0; i < 4; i++) {
      uint8ClampedArray[row * width * 4 + column * 4 + i] = pixel[i];
    }
  }

  const mirrorImageData = ctx.createImageData(canvas.width, canvas.height);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  for (let h = 0; h < canvas.height; h++) {
    for (let w = 0; w < canvas.width; w++) {
      const pixel = getPixel(imageData, h, canvas.width - w - 1);
      setPixel(mirrorImageData, h, w, pixel);
    }
  }
  ctx.putImageData(mirrorImageData, 0, 0);
  // ****** 镜像处理 ******

  const base64 = canvas.toDataURL("image/jpeg");
}

最后，使用 canvas.toDataURL() 方法将图像转换为 base64 格式，可以通过将其保存到本地或发送到服务器来存储照片。

三、完整实现代码（基于 uni-app，只适用于 H5 端，未做其它端的兼容）

注意，在手机上进行访问时，需要配置 HTTPS 协议访问，有两种方式：
  • 1、将 H5 部署到 Web 服务器上，并配置 HTTPS 协议访问。
  • 2、开发调试模式下，配置 HTTPS 访问。这种方式存在手机微信内置浏览器访问无效的情况，需要将访问地址复制到 Chrome 等浏览器上进行访问测试。

此外，还需要注意的是，有些 APP 的内置浏览器（Webview）不兼容 MediaDevices API，导致无法实现该功能。

布局代码：

<template>
  <view class="" style="width: 100vw;height: 100vh;background-color: #000;">
    <video
      style="width: 100vw;height:calc(100vh - 240rpx);"
      object-fit="fill"
    ></video>
    <view
      class=""
      style="width: 100vw;height: 100vh;background-color: transparent;opacity: 1;position: absolute;top: 0; left: 0;z-index: 1;"
    >
      <view
        class="flex justify-center align-center"
        style="width: 100vw;height: 100vh;position: absolute;top: 0; left: 0;z-index: 2;"
      >
        <image
          :src="qjkImgSrc"
          mode="widthFix"
          style="width: 600rpx;margin-top: -200rpx;"
        ></image>
      </view>
      <view
        class="flex justify-center align-center"
        style="width: 100vw;height: 100vh;position: absolute;top: 0; left: 0;z-index: 3;"
      >
        <image
          :src="qjtxkImgSrc"
          mode="widthFix"
          style="width: 500rpx;margin-top: -200rpx;"
        ></image>
      </view>

      <view
        class="flex justify-center"
        style="width: 100vw;height: 100vh;position: absolute;top: 0; left: 0;z-index: 5;"
      >
        <view
          class=""
          style="position: absolute;bottom: 88rpx;left: 68rpx; color: #fff;font-weight: bold;background: #fff;border-radius: 16rpx;"
        >
          <uni-icons
            type="close"
            :size="32"
            @click="handlePhotographCloseClick"
          >
          </uni-icons>
        </view>
        <view
          class="outer-ring"
          style="position: absolute;bottom: 40rpx;"
          @click="handlePhotographClick"
        >
          <view class="middle-ring">
            <view class="inner-ring"></view>
          </view>
        </view>
        <view
          class=""
          style="position: absolute;bottom: 88rpx;right: 68rpx; color: #fff;font-weight: bold;background: #fff;border-radius: 16rpx;"
        >
          <uni-icons
            type="folder-add"
            :size="32"
            @click="handleAddPhotographClick"
          >
          </uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

JavaScript 代码：

export default {
  data() {
    return {
      // 背景透明的取景框图片
      qjkImgSrc: "/static/images/qjk.png",
      // 背景透明的头像框图片
      qjtxkImgSrc: "/static/images/qjtxk.png",
      imageUrl: "",
      // 媒体流，用于关闭摄像头
      mediaStreamTrack: null,
    };
  },
  onLoad() {
    this.invokingCamera();
  },
  onUnload() {
    this.handlePhotographCloseClick();
  },
  methods: {
    invokingCamera() {
      const self = this;
      // 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。

      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
      }

      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
          // 首先，如果有getUserMedia的话，就获得它
          const getUserMedia =
            navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia;

          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
          if (!getUserMedia) {
            return Promise.reject(
              new Error("getUserMedia is not implemented in this browser")
            );
          }

          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
          return new Promise(function (resolve, reject) {
            getUserMedia.call(navigator, constraints, resolve, reject);
          });
        };
      }

      uni.getSystemInfo({
        success: function (res) {
          const constraints = {
            audio: false,
            video: {
              // 前置摄像头
              facingMode: "user",
              // 手机端相当于高
              width: Math.max(res.windowWidth, res.windowHeight) - 120,
              // 手机端相当于宽
              height: Math.min(res.windowWidth, res.windowHeight),
            },
          };

          navigator.mediaDevices
            .getUserMedia(constraints)
            .then(function (stream) {
              self.mediaStreamTrack = stream;

              const video = document.querySelector("video");
              // 旧的浏览器可能没有srcObject
              if ("srcObject" in video) {
                video.srcObject = stream;
              } else {
                // 防止在新的浏览器里使用它，应为它已经不再支持了
                video.src = window.URL.createObjectURL(stream);
              }
              video.onloadedmetadata = function (e) {
                video.play();
              };
            })
            .catch(function (err) {
              console.log(err.name + ": " + err.message);
            });
        },
      });
    },
    handlePhotographCloseClick() {
      if (this.mediaStreamTrack) {
        // 关闭摄像头
        this.mediaStreamTrack.getTracks().forEach(function (track) {
          track.stop();
        });
        this.mediaStreamTrack = null;
      }
    },
    handlePhotographClick() {
      const self = this;
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      const video = document.querySelector("video");
      canvas.width = Math.min(video.videoWidth, video.videoHeight);
      canvas.height = Math.max(video.videoWidth, video.videoHeight);
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

      // ****** 镜像处理 ******
      function getPixel(imageData, row, column) {
        const uint8ClampedArray = imageData.data;
        const width = imageData.width;
        const height = imageData.height;
        const pixel = [];
        for (let i = 0; i < 4; i++) {
          pixel.push(uint8ClampedArray[row * width * 4 + column * 4 + i]);
        }
        return pixel;
      }

      function setPixel(imageData, row, column, pixel) {
        const uint8ClampedArray = imageData.data;
        const width = imageData.width;
        const height = imageData.height;
        for (let i = 0; i < 4; i++) {
          uint8ClampedArray[row * width * 4 + column * 4 + i] = pixel[i];
        }
      }

      const mirrorImageData = ctx.createImageData(canvas.width, canvas.height);
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      for (let h = 0; h < canvas.height; h++) {
        for (let w = 0; w < canvas.width; w++) {
          const pixel = getPixel(imageData, h, canvas.width - w - 1);
          setPixel(mirrorImageData, h, w, pixel);
        }
      }
      ctx.putImageData(mirrorImageData, 0, 0);
      // ****** 镜像处理 ******

      self.$nextTick(() => {
        const base64 = canvas.toDataURL("image/jpeg");
        self.imageUrl = base64;
        self.handlePhotographCloseClick();
      });
    },
    handleAddPhotographClick() {
      this.uploadImage();
    },
    uploadImage: function () {
      const self = this;
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        success: function (res) {
          self.handlePhotographCloseClick();
          const file = res.tempFiles[0];

          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function (e) {
            self.imageUrl = e.target.result;
          };
        },
      });
    },
  },
};

样式代码：

<style scoped>
	video {
		transform: rotateY(180deg);
		-webkit-transform: rotateY(180deg);
		/* Safari 和 Chrome */
		-moz-transform: rotateY(180deg);
	}

	/deep/ .uni-video-bar {
		display: none;
	}

	/deep/ .uni-video-cover {
		display: none;
	}

	.outer-ring {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.middle-ring {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		background-color: #000000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.inner-ring {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		background-color: #fff;
	}
</style>

最终效果展示：

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/712788.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

手把手教你搭建SpringCloudAlibaba之Sentinel注解SentinelResource

手把手教你搭建SpringCloudAlibaba之Sentinel注解SentinelResource

SpringCloud Alibaba全集文章目录&#xff1a; 零、手把手教你搭建SpringCloudAlibaba项目 一、手把手教你搭建SpringCloud Alibaba之生产者与消费者 二、手把手教你搭建SpringCloudAlibaba之Nacos服务注册中心 三、手把手教你搭建SpringCloudAlibaba之Nacos服务配置中心 …
阅读更多...
【智慧交通项目实战】《 OCR车牌检测与识别》（四）：基于Pyqt的项目可视化

【智慧交通项目实战】《 OCR车牌检测与识别》（四）：基于Pyqt的项目可视化

&#x1f468;‍&#x1f4bb;作者简介&#xff1a; CSDN、阿里云人工智能领域博客专家&#xff0c;新星计划计算机视觉导师&#xff0c;百度飞桨PPDE&#xff0c;专注大数据与AI知识分享。✨公众号&#xff1a;GoAI的学习小屋 &#xff0c;免费分享书籍、简历、导图等&#xf…
阅读更多...
SpringBoot 限流方案

SpringBoot 限流方案

一、背景 限流对于一个微服务架构系统来说具有非常重要的意义&#xff0c;否则其中的某个微服务将成为整个系统隐藏的雪崩因素&#xff0c;为什么这么说&#xff1f; 举例来讲&#xff0c;某个SAAS平台有100多个微服务应用&#xff0c;但是作为底层的某个或某几个应用来说&…
阅读更多...
【前端】运行一个vue项目

【前端】运行一个vue项目

如何运行一个vue项目 首先cd到要运行的vue文件夹下&#xff0c;或者是在webstorm下面的终端直接打开&#xff0c;就会自动开启在这个文件夹下的终端安装项目中所有需要的依赖包 sudo npm install运行项目 sudo npm run serve到这里项目就运行起来了 4. 打开项目 点击网址打…
阅读更多...
html实现视频网站,仿爱奇艺,搜狐,迅雷看看(附源码)

html实现视频网站,仿爱奇艺,搜狐,迅雷看看(附源码)

文章目录 1.功能模板1.1 仿爱奇艺1.2 仿搜狐视频1.3 仿迅雷看看1.4 视频播放1.5 影视公司官网 2.效果和源码2.1 源代码2.2 模板目录 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/131516313 html实现视频网站…
阅读更多...
c++ 内存管理二：重载（接管内存管理工具）

c++ 内存管理二：重载（接管内存管理工具）

文章目录 前言1 重载全局的 ::operator new 运算符2 重载类的 operator new 运算符3 重载类的带有额外参数的 operator new 运算符 前言 重载 operator new 运算符来自定义内存分配的行为。重载 operator new 运算符允许我们使用自定义的内存分配逻辑&#xff0c;例如使用池分…
阅读更多...
压测工具哪个好？LoadRunner、Jmeter、Locust、Wrk 全方位对比....

压测工具哪个好？LoadRunner、Jmeter、Locust、Wrk 全方位对比....

当你想做性能测试的时候&#xff0c;你会选择什么样的测试工具呢&#xff1f;是会选择wrk&#xff1f;jmeter&#xff1f;locust&#xff1f;还是loadrunner呢&#xff1f;今天&#xff0c;笔者将根据自己使用经验&#xff0c;针对jmeter、locust、wrk和loadrunner常用的性能测…
阅读更多...
【数据结构与算法】内排序算法比较(C\C++)

【数据结构与算法】内排序算法比较(C\C++)

实践要求 1. 问题描述 各种内部排序算法的时间复杂度分析结果只给出了算法执行时间的阶&#xff0c;或大概执行时间&#xff0c;试通过随机的数据比较各算法的关键字比较次数和关键字移动次数&#xff0c;以取得直观感受。 2. 基本要求 对以下10种常用的内部排序算法进行比较…
阅读更多...
MySQL更改表结构语句

MySQL更改表结构语句

一、MySQL表结构变更语句 1. 新增字段 语法&#xff1a; &#xff08;1&#xff09;在末尾添加字段 ALTER TABLE <表名> ADD <新字段名><数据类型>[约束条件]; &#xff08;2&#xff09;在开头添加字段 ALTER TABLE <表名> ADD <新字段名> <…
阅读更多...
[C++]lambda

[C++]lambda

目录 前言&#xff1a; 1 认识lambda 2 lambda语法 3 lambda的类型 4 lambda的底层 前言&#xff1a; 本篇讲解了C11当中新添加的lambda语法&#xff0c;以及lambda的底层 1 认识lambda lambda的出现方便了很多我们写程序的地方&#xff0c;例如下面这个样例…
阅读更多...
C++图形开发（2）：最基本的图形界面

C++图形开发（2）：最基本的图形界面

文章目录 1.构成2.内容介绍2.1 initgraph()2.2 _getch()2.3 closegraph() 3.总结 今天来简单介绍下最基本的图形界面~ 1.构成 输入以下内容并编译&#xff1a; 这就是一个最基本的图形界面了 #include<graphics.h> #include<conio.h>int main() {initgraph(600, …
阅读更多...
rollup入门 - 学习笔记（1）

rollup入门 - 学习笔记（1）

rollup打包工具 打包项目用webpack , 打包js库用rollup 下载rollup npm i rollup --save-dve 初始化项目 npm init -y 创建src/main.js文件 import welcomerollup from ../modules/mymodule welcomerollup(hello world) 创建module/mymodule.js文件 const welcomerollup (ms…
阅读更多...
Python PDF生成和二进制流转换（FPDF）

Python PDF生成和二进制流转换（FPDF）

文章目录 安装FPDF生成PDF文档生成PDF的二进制流 安装FPDF pip install fpdf22.7.4生成PDF文档 通过FPDF生成PDF文档的具体步骤&#xff1a; 初始化&#xff1a;fpdf库的操作主要由FPDF对象来处理&#xff0c;在生成PDF文档时&#xff0c;需要初始化FPDF对象。添加页面&…
阅读更多...
引爆媒体关注的秘密武器：媒介易教你打造热门新闻故事！

引爆媒体关注的秘密武器：媒介易教你打造热门新闻故事！

在进行媒体邀约时&#xff0c;提供有吸引力的新闻价值和故事性是吸引媒体关注和获得采访机会的关键。媒体记者时常接收大量的邀约&#xff0c;因此需要与众多企业竞争&#xff0c;才能让自己的邀约脱颖而出。本文将探讨如何在媒体邀约中提供有吸引力的新闻价值和故事性&#xf…
阅读更多...
Domain Admin域名和SSL证书过期监控到期提醒

Domain Admin域名和SSL证书过期监控到期提醒

基于Python3 Vue3.js 技术栈实现的域名和SSL证书监测平台 用于解决&#xff0c;不同业务域名SSL证书&#xff0c;申请自不同的平台&#xff0c;到期后不能及时收到通知&#xff0c;导致线上访问异常&#xff0c;被老板责骂的问题 核心功能&#xff1a;域名 和SSL证书 的过期…
阅读更多...
【敬伟ps教程】亮度与色阶看懂直方图

【敬伟ps教程】亮度与色阶看懂直方图

文章目录 亮度/对比度色阶调整输入色阶调整输出色阶调节原色通道调整图层 亮度/对比度 控制明暗的视觉因素&#xff0c;三要素之一&#xff0c;明度 在拾色器中修改 HSB 中的 B&#xff0c;改为较低的值即可调整明度。明度较低时&#xff0c;RGB色值偏低&#xff0c;CMYK色值…
阅读更多...
怎么看懂今日白银现货价格？这个技术信号了解一下

怎么看懂今日白银现货价格？这个技术信号了解一下

金叉&#xff0c;是某些技术指标的一种技术动作&#xff0c;通常预示着&#xff0c;今日白银现货价格开始上涨&#xff0c;并且出现了买入机会。但是&#xff0c;是不是金叉就一定有买入机会呢&#xff1f;在今日白银现货价格出现金叉时要如何处理呢&#xff1f;这都是我们要处…
阅读更多...
UV统计量

UV统计量

UV统计 UV&#xff1a;Unique Visitor&#xff0c;即独立访客量&#xff0c;是指通过互联网访问、浏览该网页的自然人。一天内同一个用户多次访问该网站&#xff0c;只会记录一次。 PV&#xff1a;Page View&#xff0c;即页面访问量或点击量&#xff0c;用户每访问网站的一个…
阅读更多...
d2l_第九章_RNN循环神经网络

d2l_第九章_RNN循环神经网络

x.1 Sequence model 经过前面的学习&#xff0c;我们已知数据大于算法。而以数据为驱动的前提下&#xff0c;我们提出了各种模型。为了适配表格数据&#xff0c;提出了MLP&#xff1b;为了适配图像数据提出了CNN&#xff1b;而对了适配序列数据&#xff0c;我们提出了RNN。 目…
阅读更多...
C++笔记之call_once和once_flag

C++笔记之call_once和once_flag

C笔记之call_once和once_flag code review! 文章目录 C笔记之call_once和once_flag1.call_once和once_flag2.std::call_once和单例模式 1.call_once和once_flag 2.std::call_once和单例模式
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023