Vue进阶（五十）： webpack 图片未转成 base64分析 及 在Webapp调用默认相机功能

首先解释下base64的目的，其主要是为了减少http请求，转为base64以后小图片可以跟js同时被加载到浏览器，而不需要多次对服务器发出图片资源请求；其次，图片转成base64后，文件体积变大了大约1/3左右。

• 文件的base64编码存储到了js文件中。
• vue-webpack模板的默认设置限制了转码的文件大小为10000B以下。
• 静态文件目录中的所有文件不会被转码，也就是/static下的所有文件都不会被转码。
• 如果所有图片均转码为base64，那么很容易造成存储base64的js文件过大，一方面会造成资源加载时间过长的白屏问题，另一方面也会给js解释器带来非常大的负担，这样反而起不到优化的作用，而且会非常影响体验。
• 如果非要让所有图片转为base64，可以修改webpack中的url-loader配置。

webpack.base.config.js配置文件信息如下：

 {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }

在webapp上使用input:file, 指定capture属性调用默许相机，摄像，录音功能。

在iOS6下开发webapp，使用input之file，很有用

<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">

capture表示，可以捕获到系统默认的设备，比如：

• camera--照相机；
• camcorder--摄像机；
• microphone--录音。

accept表示，直接打开系统文件目录。

其实html5的input:file标签还支持一个multiple属性，表示可以支持多选，如：

<input type="file" accept="image/*" multiple>

加上这个multiple后，capture就没啥用了，因为multiple是专门用来支持多选的。