/**
* @method uploadImg 上传图片处理
* @param dom dom元素
* @param callback 上传图片后的回调处理
* @param imgSet 设置图片的宽高及quality模糊度
*/
function uploadImg(dom,callback,imgSet={}) {
// 通过dom读取文件数据;是个伪数组(可一次选择多张图片),要使用数组遍历并转为base64;
let files = dom.files;
for(let i = 0; i<files.length; i++) {
let reader = new FileReader();
reader.readAsDataURL(files[i]);
reader.onload = (e) =>{
let imgCode = e.target.result;
canvasDataUrl(imgCode,callback,imgSet);
// 可多次上传同一张图片;
dom.setAttribute('type', 'txt');
dom.setAttribute('type',"file");
}
};
};
function canvasDataUrl(path,callback,imgSet) {
let img = new Image();
img.src = path;
img.onload = function() {
// 上图图片的原始宽高;
let w = this.width,
h = this.height,
scale = w / h;
// 如果imgSet有值,则优先选择imgSet;
w = imgSet.width || w;
h = imgSet.height || (w / scale);
let quality = 0.4;
//生成canvas
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
// 创建属性节点
let anw = document.createAttribute("width");
anw.nodeValue = w;
let anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(this, 0, 0, w, h);
// 图像质量
if(imgSet.quality && imgSet.quality <= 1 && imgSet.quality > 0){
quality = imgSet.quality;
}
// quality值越小,所绘制出的图像越模糊,返回压缩后base64的值
let base64 = canvas.toDataURL('image/png', quality);
callback(base64);
}
}
export default uploadImg;