First Commit

lee98064 · Aug 8, 2021 · cd69137 · cd69137
commit cd69137
Show file tree

Hide file tree

Showing 16 changed files with 7,178 additions and 0 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1 @@
+last 2 versions
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store
diff --git a/babel.config.json b/babel.config.json
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}
diff --git a/demo/Upload.aspx b/demo/Upload.aspx
@@ -0,0 +1,16 @@
+<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Upload.aspx.vb" Inherits="Upload" %>
+
+<!DOCTYPE html>
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head runat="server">
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title></title>
+</head>
+<body>
+    <form id="form1" runat="server">
+        <div>
+        </div>
+    </form>
+</body>
+</html>
diff --git a/demo/Upload.aspx.vb b/demo/Upload.aspx.vb
@@ -0,0 +1,39 @@
+Imports System.Web.Services
+Imports System.IO
+Imports System.Data.SqlClient
+Imports System.Data
+Partial Class Upload
+    Inherits System.Web.UI.Page
+    ' 因為js限制不能使用webform方式上傳，需使用ajax，那回傳過來的是一個json字串，asp會自動將變數對應進imageData
+    ' 這部分已經整合進js，所以只需處理asp部分就好
+    '回傳樣式:
+    ' {
+    '     imageData: "BASE64編碼"
+    ' }
+    '參考網址:https://www.aspforums.net/Threads/102983/Pass-Send-Image-data-as-BASE64-string-using-jQuery-AJAX-in-ASPNet/
+
+    '此句必加，防止引發CSRF或相關登入驗證錯誤
+
+    <WebMethod(EnableSession:=True)>
+    Public Shared Sub MoveImages(ByVal imageData As String)
+        '檔案名稱須包含副檔名
+        Dim fileName As String = DateTime.Now.ToString("yyyy-MM-dd HH-mm-ss") & ".jpeg"
+        '儲存路徑，可自行修改，可使用相對路徑或使用那個可以取得當前網頁路徑的那個函數，但我忘記是啥了:D
+        Dim pathstring As String = "D:\"
+        Dim destFile As String = Path.Combine(pathstring)
+        Dim destFile1 As String = Path.Combine(destFile, fileName)
+        '檢查是否有相同檔名，有就刪除舊的，這邊可以客製化作法
+        If File.Exists(destFile1) Then
+            File.Delete(destFile1)
+        End If
+        '使用FileStream將Base64轉成圖片檔案
+        Using fs As FileStream = New FileStream(destFile1, FileMode.Create)
+            Using bw As BinaryWriter = New BinaryWriter(fs)
+                Dim bytes As Byte() = Convert.FromBase64String(imageData)
+                bw.Write(bytes, 0, bytes.Length)
+                bw.Close()
+            End Using
+        End Using
+    End Sub
+
+End Class
diff --git a/demo/Web.config b/demo/Web.config
@@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<configuration>
+  <system.web>
+    <compilation debug="true" targetFramework="4.0"/>
+  </system.web>
+</configuration>
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,46 @@
+<!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>拍照Demo</title>
+</head>
+<body>
+    <video id="webcam" autoplay></video>
+    <button type="button" id="takephoto">拍照</button>
+    <button type="button" id="changecam">換相機</button>
+    <img id="takePhotoCanvas"></img>
+    <script src="./webcamtools.js"></script>
+    <script defer>
+        //建立相機物件
+        var a = new window.WebCamTools("#webcam");
+
+
+        //按下拍照鈕拍照
+        document.querySelector('#takephoto').addEventListener('click', function() {
+
+            //呼叫物件內拍照方法，後面網址是拍照後檔案要上傳的網址
+            a.takeSnap("./Upload.aspx/MoveImages")
+        });
+
+        //按下按鈕切換相機
+        document.querySelector('#changecam').addEventListener('click', function() {
+            //呼叫切換方法
+            setCamera()
+        });
+
+        //獨立出切換相機方法可以重複使用
+        function setCamera(){
+            a.getCameras().then(function (cameras) {
+                a.setCamera(cameras);
+            }).catch(function (e) {
+                console.error(e);
+            });
+        }
+
+        //當網頁載入時會跳出選擇相機
+        setCamera();
+    </script>
+</body>
+</html>
diff --git a/demo/webcamtools.js b/demo/webcamtools.js