拍照或選擇文件 壓縮並上傳

**前端 html：**
- 調取攝像頭+選擇文件

```
<input id="file" type="file" accept="image/*"/>
加入 capture="camera"，直接調取攝像頭
```

**文件讀取：**

```
var file = $("input")[0].files[0]
var reader = new FileReader()
reader.onload = 讀取完成後回調函數
reader.readAsDataURL(file)
```

**圖片壓縮：**
- 根據相關參數壓縮圖片

```
function canvasDataURL(path, obj, callback) {
var img = new Image();
img.src = path;
img.onload = function () {
var that = this;
// 默認按比例壓縮
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默認圖片質量爲0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 建立屬性節點
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 圖像質量
if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
quality = obj.quality;
}
// quality值越小，所繪製出的圖像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回調函數返回base64的值
callback(base64);
}
}
```

|參數|值|說明
|:--:|:--:|:------:|
|callback|回調函數|callback(base64)|
|path|string|圖片路徑|
|obj|object|壓縮參數|

**轉換 base64：**
- 將以base64的圖片url數據轉換爲Blob

```
function convertBase64UrlToBlob(urlData) {
var arr = urlData.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
}
```

|參數|值|說明
|:--:|:--:|:------:|
|urlData|string|base64圖片|

**圖片上傳：**
- 將base64圖片上傳到cdn，在上傳以前先將base64圖片轉換成爲blob圖片

```
var fd = new FormData();
fd.append("file", blob圖片);

$.ajax({ url: 'https://top.yidianzixun.com/tool/public/file/upload', type: 'POST', data: fd, cache: false, contentType: false, processData: false, success: function (result) { if (result.status === 1) { var imglink = result.url[0] //圖片連接 } }, error: function (returndata) { alert('網絡繁忙，請稍後重試！') } });```