**前端 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('网络繁忙，请稍后重试！')
}
});
```