掃瞄QRCODE

只靠 HTML 前端技術就可以使用相機，那麼最實用的功能就是掃瞄 QRCODE ，這裡提供一個最簡單易用的方式 使用函式庫：https://github.com/mebjas/html5-qrcode ``` $mmcode(r1) ``` <div class="mmresult r1"> <button id="b072401_idfront">Front</button> <button id="b072401_idback">Back</button> <button id="b072401_idstop">Stop</button> <input type="file" id="b072401_idfile" accept="image/*"> <hr> <div id="b072401_idresult"></div> <hr> <div id="b072401_reader" style="display:inline-block;width:320px;" ></div> <script> $(function() { const html5QrCode = new Html5Qrcode("b072401_reader"); const qrCodeSuccessCallback = (decodedText, decodedResult) => { $("#b072401_idresult").html(JSON.stringify(decodedResult,"",4)) }; const config = { fps: 10, qrbox: { width: 200, height: 200 } }; $("#b072401_idfront").on("click",function() { $("#b072401_idstop").click(); html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback); }) $("#b072401_idback").on("click",function() { $("#b072401_idstop").click(); html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback); }) $("#b072401_idstop").on("click",function() { try { html5QrCode.stop().then((ignore) => { console.log("stop ok") }).catch((err) => { console.log("stop err") }); } catch(e){} }) $("#b072401_idfile").on("change",function(e) { $("#b072401_idstop").click(); if (e.target.files.length == 0) { // No file selected, ignore return; } const imageFile = e.target.files[0]; // Scan QR Code html5QrCode.scanFile(imageFile, true) .then((decodedText) => { $("#b072401_idresult").html(decodedText) }) .catch(err => { console.log(`Error scanning file. Reason: ${err}`) }); }) }) </script> <script src="https://yiharng.github.io/html5-qrcode.min.js"></script> </div>

使用 Webcam

本來要整理 html 的資料，卻覺得這類型的資料太多也太容易取得，決定改變一下方向，只整理 html 相關比較進階實用的小技巧。 無意間看到一個令人懷念的東西，getUserMedia()，可以在網頁上使用 Webcam ，好幾年前遇到一個專案，需要利用相機功能實做一個類似 AR 的畫面，而那個專案用的是 cordova ，於是查了查資料，就用 getUserMedia 來取得相機畫面當背景，在前面放個箭頭指向目的地的方向，當實作完成後卻發現 Android 4.x 不支援，還好加上 webkit plugin 後就可以了，然而最麻煩的是 IOS 不支援...... 最後只好用 camera preview plugin 來重寫，而後續的又是另一個故事了。 那麼首先先來一個範例 ``` $mmcode(r1) ``` <div class="mmresult r1"> <button style="height:4ch;" id="b071801_idfront">前鏡頭</button> <button style="height:4ch;" id="b071801_idback">後鏡頭</button> <button style="height:4ch;" id="b071801_idstop">stop</button> <button style="height:4ch" id="b071801_idgetpic">抓圖</button> <br> <div id="b071801_ida"> 亮度<input id="b071801_idb" type="range" min="0" max="200" value="100"><br> 對比<input id="b071801_idc" type="range" min="0" max="200" value="100"><br> 飽和<input id="b071801_ids" type="range" min="0" max="400" value="100"><br> </div> <video controls id="b071801_video" playsinline autoplay muted loop>Video stream not available.</video> <br> <img id="b071801_idimg" src=""> <script> $(()=> { let b071801_video=$("#b071801_video")[0]; function stopcam() { try { b071801_video.srcObject.getTracks()[0].stop(); } catch(err){} } function docam(mode) { let fmode; stopcam(); if (!mode) { fmode="user";//前鏡頭 } else { fmode="environment";//後鏡頭 // fmode={ exact: "environment" };//後鏡頭 } navigator.mediaDevices.getUserMedia ( { audio: false, video: { width: { min: 320, ideal: 320, max: 1920 }, height: { min: 240, ideal: 240, max: 1080 }, facingMode: fmode } } ).then(function(stream) { b071801_video.srcObject = stream; b071801_video.play(); }).catch(function(err) { console.log("An error occurred: " + err); }); } $("#b071801_idfront").on("click",function() { docam(0); }) $("#b071801_idback").on("click",function() { docam(1); }) $("#b071801_idstop").on("click",function() { stopcam(); }) $("#b071801_idgetpic").on("click",function() { let ca=$("<canvas></canvas>")[0]; let ct = ca.getContext('2d'); let w=b071801_video.videoWidth; let h=b071801_video.videoHeight; ca.width = w; ca.height = h; ct.drawImage(b071801_video, 0, 0, w, h); let data = ca.toDataURL('image/jpeg'); $("#b071801_idimg").attr("src",data); }) $("#b071801_ida input").on("input",function() { let f="brightness("+$("#b071801_idb").val()+"%) " +"contrast("+$("#b071801_idc").val()+"%) " +"saturate("+$("#b071801_ids").val()+"%) "; $("#b071801_video").css("filter",f); $("#b071801_idimg").css("filter",f); }) }) </script> </div> 程式盡量簡化了，可以設定使用前鏡頭還是後鏡頭，也可以抓圖，而且支援 CSS 的 filter ，利用 CSS 來調整亮度對比飽和。 在 iphone 上，使用 chrome 或 firefox 都沒有問題，而 safari 似忽不支援， 在 MAC 上的 safari 完全正常，Android 上也是完全正常 可以用相機預覽，可以抓圖，基本上就是拍照功能了，也可以即時處理影像，例如辨識條碼或證件號碼之類的，光靠網頁就可以做到很多特別的功能 參考資料：https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

整理一下所有 input 的型式

無意間看到一些沒用過的 input 型式，查了一下資料，決定開始整理一些 HTML 的技術文件 Form 可以用 GET 和 POST 以及用 POST 時可以設定編碼方式用來上傳檔案 ``` <form method="post" enctype="multipart/form-data" action=""> <form method="get" action=""> ``` ``` $mmcode(r1) ``` <div class="mmresult r1"> <form method="get" action=""> <fieldset> <legend>元件</legend> button <input type="button" name="button" value="button"><br> checkbox <input type="checkbox" name="checkbox" value="123" checked><br> radio <input type="radio" name="radio" value="123" checked> <input type="radio" name="radio" value="456"><br> range <input type="range" name="range"><br> color <input type="color" name="color"><br> </fieldset> <fieldset> <legend>表單</legend> text <input type="text" name="text"><br> password <input type="password" name="password"><br> number <input type="number" name="number"><br> search <input type="search" name="search"><br> tel <input type="tel" name="tel"><br> email <input type="email" name="email"><br> url <input type="url" name="url"><br> file <input type="file" name="file" accept="text/plain, image/jpeg"><br> hidden <input type="hidden" name="hidden" value="hidden"><br> </fieldset> <fieldset> <legend>時間相關</legend> date <input type="date" name="date"><br> datetime <input type="datetime-local" name="datetime"><br> time <input type="time" name="time"><br> week <input type="week" name="week"> 實測結果在 IPhone 上無法使用<br> month <input type="month" name="month"><br> </fieldset> <fieldset> <legend>表單提交</legend> image <input type="image" src="https://yiharng.github.io/bomb.png"><br> reset <input type="reset"><br> submit <input type="submit"><br> </fieldset> </form> </div>