標籤：har .com fileread das rip html function 圖片 css
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>HTML5 調用手機網路攝影機</title> 7 <style type="text/css"> 8 .addBorder { 9 border: 1px solid #ccc;10 }11 #imgDiv {12 width: 300px;13 height: 300px;14 }15 16 #imgContent {17 width: 100%;18 height: 100%;19 }20 </style>21 </head>22 23 <body>24 25 <button class="btn" style="height: 200px;width: 200px;background-color: red;">按鈕</button>26 <form id="imgForm">27 <input class="addBorder" accept="image/*" type="file" style="display: none;">28 <br/>29 </form>30 <button style="height: 100px;width: 100px;background-color: green;" onclick="loadImg()">擷取圖片</button>31 <div id="imgDiv">32 <img id="imgContent">33 </div>34 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>35 <script type="text/javascript">36 37 function loadImg() {38 //擷取檔案 39 var file = $("#imgForm").find("input")[0].files[0];40 41 //建立讀取檔案的對象 42 var reader = new FileReader();43 44 //建立檔案讀取相關的變數 45 var imgFile;46 47 //為檔案讀取成功設定事件 48 reader.onload = function(e) {49 alert(‘檔案讀取完成‘);50 imgFile = e.target.result;51 console.log(imgFile);52 $("#imgContent").attr(‘src‘, imgFile);53 };54 55 //正式讀取檔案 56 reader.readAsDataURL(file);57 }58 $(‘.btn‘).click(function() {59 $(‘.addBorder‘).click();60 })61 </script>62 </body>63 64 </html>
調取手機網路攝影機拍照並擷取拍得的照片
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
