摘要：使用HTML5編寫移動Web應用，主要是為了嘗試一下“一套代碼多處運行”，一個webapp幾乎可以不加修改的運行在PC/Android/iOS等上面運行。但是寫到現在覺得雖然這種方式弊大於利，不僅在速度上有差異，webapp對移動端的一些原生功能支持並沒有那么好。我用的vue寫的系統，完成之后用webpack打包模塊，hbuilder打包成apk，但是要解決的問題並不少。現在來說說webapp拍照上傳。
html5是支持拍照上傳或者調用本地相冊的，
<!--兼容安卓微信調用攝像頭--> <input type="file" name="file" capture="camera"> <!--兼容安卓默認選擇sd卡上的相冊圖片--> <input type="file" name="file" accept="image/*" >
然而hbuilder打包apk之后，在安卓機（華為榮耀9）測試的時候，發現 capture="camera" 失效了，打開的是本地相冊，但是不能調用攝像頭。我就打開了webpack-server，移動端的瀏覽器運行的時候，在瀏覽器里面是可以調用攝像頭的，最后發現了很多人都有這個問題，但是並沒有說明解決辦法。我自己最后是結合H5提供的 window.plus 功能調用移動端的攝像頭，當然，先判斷移動端是否支持 window.plus ，如果不支持，就依然用 <input> 實現圖片選取。
H5 的 plus.camera 官方 API：http://www.html5plus.org/doc/zh_cn/camera.html
下面我就說說我的解決方法，主要是參照了網上一些實例和官網API寫出來的，請看下面的VUE組件，這個組件可以直接引用，有興趣的同學可以試試：
1 <template> 2 <div> 3 <div class="camera-photo" ref="divGenres" v-show="isPhoto" @click="choiceImg"> 4 <img style="width:300px;height:300px;" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1528077222&di=69a2ffcffd12e35216ab71da7a610abe&src=http://img.zcool.cn/community/01f15555b4df7e6ac725ca50c172a1.png@2o.png"/> 5 <br> 6 <span>請選擇圖片上傳</span> 7 <input type="file" ref="uploadImage" @change="onFileChange" accept="image/*" capture="camera" style="display: none;"> 8 </div> 9 10 <div class="list-li" v-show="show"> 11 <div style="display: inline-block;"> 12 <a class="list-link" @click='previewImage(imgsrc)'> 13 <img :src="imgsrc"> 14 </a> 15 <span class="list-img-close" @click='delImage'></span> 16 </div> 17 <div class="add-preview" v-show="isPreview" @click="closePreview"> 18 <img :src="previewImg"> 19 </div> 20 <button type="button" class="upload-button" @click="upload">圖片上傳</button> 21 </div> 22 </div> 23 </template> 24 25 <script> 26 import Bus from '../bus.js' 27 import qs from "qs" 28 export default { 29 data(){ 30 return{ 31 imgsrc:'',//上傳的·圖片的地址 32 show:false,//圖片放大預覽 33 previewImg: '',//預覽圖片的地址 34 isPreview: false,//是否預覽當前圖片 35 isPhoto: true, 36 uploadFile:null 37 } 38 }, 39 methods:{ 40 41 choiceImg(){ 42 let self = this; 43 if (!window.plus){ 44 self.addPic()//如果不支持plus,就用本地相冊上傳即可 45 return; 46 } 47 48 let title = "選擇照片" 49 let btns = ['拍照','相冊'] 50 51 var func = function(e){ 52 var index = e.index; 53 54 if(index == 1) self.choiceCamera(); 55 if(index == 2) self.choicePic(); 56 } 57 58 if(title && btns && btns.length > 0){ 59 var btnArray = []; 60 for(var i=0; i<btns.length; i++){ 61 btnArray.push({title:btns[i]}); 62 } 63 64 plus.nativeUI.actionSheet({ 65 title : title, 66 cancel : '取消', 67 buttons : btnArray 68 }, function(e){ 69 if(func) func(e); 70 }); 71 } 72 }, 73 74 choiceCamera(){ 75 let self = this; 76 var cmr = plus.camera.getCamera(); 77 cmr.captureImage(function (path){ 78 79 plus.io.resolveLocalFileSystemURL(path, function(entry){ 80 self.imgsrc= entry.toLocalURL(); 81 self.show = true; 82 83 }, function(e){plus.nativeUI.toast("讀取拍照文件錯誤：" + e.message); }); 84 }, function(e){},{index:1,filename:"_doc/camera/"}); 85 } , 86 87 choicePic(){ 88 let self = this; 89 plus.gallery.pick( function(p){ 90 plus.io.resolveLocalFileSystemURL(p, function(entry) { 91 self.imgsrc= entry.toLocalURL(); 92 self.show = true; 93 }, function(e) { 94 plus.nativeUI.toast("讀取拍照文件錯誤：" + e.message); 95 }); 96 }, function ( e ) { plus.nativeUI.toast("讀取拍照文件錯誤：" + e.message);}, { 97 filename: "_doc/camera/", 98 filter:"image" 99 } ); 100 }, 101 102 upload(){ 103 var self = this 104 var wt ; 105 if (window.plus) 106 wt = plus.nativeUI.showWaiting(); 107 108 var img = new Image, 109 width = 512, //image resize 壓縮后的寬 110 quality = 0.5, //image quality 壓縮質量 111 canvas = document.createElement("canvas"), 112 drawer = canvas.getContext("2d"); 113 img.src = self.imgsrc; 114 img.onload = function(){//利用canvas壓縮圖片 115 canvas.width = width; 116 canvas.height = width * (img.height / img.width); 117 drawer.drawImage(img, 0, 0, canvas.width, canvas.height); 118 var base64 = canvas.toDataURL("image/*", quality); 119 var pic = base64.split(',')[1];//圖片的base64編碼內容 120 var f=self.imgsrc; 121 var filename=f.replace(f.substring(0, f.lastIndexOf('/') + 1), '');//圖片名稱 122 123 if(self.uploadFile !== null){//addPic方法得到的圖片文件 124 filename = self.uploadFile.name 125 let reader = new FileReader(); 126 reader.readAsDataURL(self.uploadFile); 127 reader.onload = function(e){ 128 img.src = e.target.result; 129 } 130 img.onload = function(){ 131 canvas.width = width; 132 canvas.height = width * (img.height / img.width); 133 drawer.drawImage(img, 0, 0, canvas.width, canvas.height); 134 base64 = canvas.toDataURL("image/*", quality); 135 pic = base64.split(',')[1]; 136 } 137 }
//此處是將圖片上傳到服務器的代碼，略過 138 } 139 }, 140 141 onFileChange(e){ 142 let self = this; 143 let files = e.target.files || e.dataTransfer.files; 144 if (!files.length) return; 145 let file = files[0];//File對象 146 self.uploadFile = file; 147 let reader = new FileReader();//FileReader對象 148 reader.readAsDataURL(file);//該方法會讀取指定的 Blob 或 File 對象。讀取操作完成的時候，readyState 會變成已完成（DONE），並觸發 loadend 事件，同時 result 屬性將包含一個data:URL格式的字符串（base64編碼）以表示所讀取文件的內容。 149 150 reader.onload = function(e){ 151 self.imgsrc= e.target.result;//圖片內容的base64編碼 152 self.show = true; 153 } 154 }, 155 156 addPic: function (e) { 157 let els = this.$refs.divGenres.querySelectorAll('input[type=file]') 158 els[0].click() 159 return false 160 }, 161 162 delImage: function () { 163 this.imgsrc = ""; 164 this.show = false; 165 this.isPreview = false; 166 }, 167 168 previewImage: function (url) { 169 let vm = this; 170 vm.isPreview = true; 171 vm.previewImg = url; 172 }, 173 174 closePreview: function () { 175 let vm = this; 176 vm.isPreview = false; 177 vm.previewImg = ""; 178 }, 179 }, 180 } 181 </script> 182 183 <style> 184 .upload-button{ 185 display: block; 186 margin-top: 10px; 187 } 188 .camera-photo{ 189 text-align:center; 190 margin-top:80px; 191 } 192 .list-li { 193 194 display: flex; 195 flex-direction: column; 196 align-items: center; 197 padding: 8px; 198 margin-top:10px; 199 position: relative; 200 text-align: center; 201 margin-left: auto; 202 margin-right: auto; 203 top: 0; 204 left: 0; 205 right: 0; 206 bottom: 0; 207 } 208 .list-link img { 209 width: 150px; 210 height: 150px; 211 } 212 .list-link a:visited { 213 background-color: #465c71; 214 border: 1px #4e667d solid; 215 color: #dde4ec; 216 display: flex; 217 line-height: 1.35em; 218 padding: 4px 20px; 219 text-decoration: none; 220 white-space: nowrap; 221 overflow: hidden; 222 } 223 .list-link a:hover { 224 background-color: #bfcbd6; 225 color: #465c71;/ 226 text-decoration: none; 227 } 228 .list-link a:active { 229 background-color: #465c71; 230 color: #cfdbe6; 231 text-decoration: none; 232 } 233 .list-img-close { 234 background: #ffffff url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526905315674&di=4c2d6a6985b34e141f37bc9fae7f2209&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F55%2F73%2F39I58PICCqK_1024.png) no-repeat right top; 235 border-color: #ff4a00; 236 background-position: center; 237 background-size: 35px 35px; 238 display: block; 239 float: left; 240 top: 5px; 241 width: 10px; 242 height: 10px; 243 position: absolute; 244 margin-top: 0px; 245 margin-left: 135px; 246 padding: 8px; 247 z-index: 10; 248 border-radius: 5px; 249 text-align: center; 250 } 251 .add-preview{ 252 width: 300px; 253 height: 300px; 254 } 255 .add-preview img{ 256 width: 100%; 257 height: 100%; 258 } 259 </style>
總之，嘗試之后覺得，web工程師如果要做移動端開發，還是得有安卓或者ios工程師的支持。
補充：2018-8-24
canvas的圖片壓縮原理，canvas可以改變圖片大小，也可以改變圖片質量。quality改變圖片質量。base64只是對圖片對應的二進制碼，按照六位對應一個字符規則做轉換，轉碼后是反而比原圖片文件大的。但是對於小圖片而言，經轉換后多出來的字節傳輸遠比多建立一個http連接開銷小，所以會利用base64對小圖轉碼來提高頁面加載速度。至於圖片壓縮原理，簡單來說，通過算法減少一張圖片上的顏色差異，犧牲圖片畫質。比如緊挨着的顏色相近的四個像素的顏色信息壓縮前大概占16個字節，壓縮后變成一個顏色就能減少近4倍。quality用來控制色差的力度，值越小力度越大，顏色相差較大的兩個像素也會被處理，自然被壓縮后文件就越小，畫質就越爛。
用base64編碼，源文件會變大，base64不能壓縮圖片，base64就是為了減少http請求。