JavaScript(JS)+OpenCV+OSS，JS整合OpenCV实现拍照，并把照片上传到OSS（Demo）

本文链接：https://blog.youkuaiyun.com/maxbigbug/article/details/144130701

文章目录

1.前期准备
2.整合
- 1.完整版
- 2.效果

之前用Java整合了一个opencv实现拍照上传的功能，考虑到后台代码都是部署到服务器上的，没办法控制用户的电脑摄像头，所以有重新开发一个JavaScript版的
链接: Java版整合opencv

1.前期准备

1.安装 OpenCV.js

首先，你需要在你的项目中引入 OpenCV.js。你可以通过 CDN 或者下载库文件。

<script async src="https://docs.opencv.org/4.x/opencv.js" type="text/javascript"></script>

注：也可以将opencv.js下载下来放到本地来引用

2.上传图片到 OSS

你需要使用阿里云的 OSS SDK 来上传图片。首先确保你已经在项目中引入了 OSS SDK。

<script src="https://cdn.jsdelivr.net/npm/ali-oss/dist/aliyun-oss-sdk.min.js"></script>

3.打开摄像头并拍照方法

使用 HTML5 的 getUserMedia API 来访问摄像头。

<video id="video" width="640" height="480" autoplay></video>
   <button id="snap">拍照</button>
   <canvas id="canvas" width="640" height="480"></canvas>

   <script>
       const video = document.getElementById('video');

       // 请求摄像头权限
       navigator.mediaDevices.getUserMedia({ video: true })
           .then(stream => {
               video.srcObject = stream;
           })
           .catch(err => {
               console.error("Error accessing the camera: ", err);
           });

       document.getElementById('snap').addEventListener('click', () => {
           const canvas = document.getElementById('canvas');
           const context = canvas.getContext('2d');
           context.drawImage(video, 0, 0, canvas.width, canvas.height);
           const imageData = canvas.toDataURL('image/png'); // 获取图片数据
           uploadToOSS(imageData); // 上传到 OSS
       });
   </script>

4.上传图片方法

async function uploadToOSS(imageData) {
       const client = new OSS({
           region: '<your-region>',
           accessKeyId: '<your-access-key-id>',
           accessKeySecret: '<your-access-key-secret>',
           bucket: '<your-bucket-name>'
       });

       const base64Data = imageData.replace(/^data:image\/png;base64,/, "");
       const fileName = `photo_${Date.now()}.png`;

       try {
           const result = await client.put(fileName, Buffer.from(base64Data, 'base64'));
           console.log('Upload Success:', result);
       } catch (e) {
           console.error('Upload Error:', e);
       }
   }

2.整合

1.完整版

<!DOCTYPE html>
<html lang="zh-Hans-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/ali-oss/dist/aliyun-oss-sdk.min.js"></script>
  <script async src="opencv.js" type="text/javascript"></script>
</head>

<body>
  <video id="video" width="640" height="480" autoplay></video>
  <button id="snap">拍照</button>
  <canvas id="canvas" width="640" height="480"></canvas>
  <script>
    const video = document.getElementById('video');

    // 请求摄像头权限
    navigator.mediaDevices.getUserMedia({ video: true })
      .then(stream => {
        video.srcObject = stream;
      })
      .catch(err => {
        console.error("Error accessing the camera: ", err);
      });

    document.getElementById('snap').addEventListener('click', () => {
      const canvas = document.getElementById('canvas');
      const context = canvas.getContext('2d');
      context.drawImage(video, 0, 0, canvas.width, canvas.height);
      const imageData = canvas.toDataURL('image/png'); // 获取图片数据
      uploadToOSS(imageData); // 上传到 OSS
    });

    async function uploadToOSS(imageData) {
      const client = new OSS({
        region: '<your-region>',
        accessKeyId: '<your-access-key-id>',
        accessKeySecret: '<your-access-key-secret>',
        bucket: '<your-bucket-name>'
      });

      const base64Data = imageData.replace(/^data:image\/png;base64,/, "");
      const fileName = `photo_${Date.now()}.png`;

      try {
        const result = await client.put(fileName, Buffer.from(base64Data, 'base64'));
        console.log('Upload Success:', result);
      } catch (e) {
        console.error('Upload Error:', e);
      }
    }
  </script>
</body>
</html>