使用Canvas和Base64实现上传头像

let mycanvas = document.getElementById('mycanvas');
        let NowCanvas = null;
        let cxt = mycanvas.getContext('2d');
        
        //绘制logo的灰色背景
        cxt.fillStyle ="rgba(255,255,255,.6)";
        cxt.fillRect(0,320,500,200);
        
        //绘制logo
        let logoImg = new Image()
        logoImg.src = 'img/wt43logo.png';
        logoImg.onload = function(){
            //绘制logo
            cxt.drawImage(logoImg,95,320,logoImg.width/1.5,logoImg.height/1.5);
            cxt.globalCompositeOperation="destination-over";
            NowCanvas=cxt.getImageData(0,0,500,500);
        }
        
            
        /* 获取上传的文件信息 */
        document.getElementById('file').οnchange= function(){

            //获取文件列表：files[0]代表图片的信息,赋值给变量uploadImg
            let uploadImg = this.files[0];
            let reg = /(jpeg)|(png)/g;//定义正则表达式限制上传图片类型
            
            if(uploadImg.size>=2097152){    
                alert("上传的文件必须小于 2MB");
            //type是文件类型
            }else if(!reg.test(uploadImg.type)){
                alert("上传的文件必须为 jpeg或png")
            }else{
                //生成临时访问路径
                let imgblob = URL.createObjectURL(uploadImg);
                let imageObj = new Image();
                imageObj.src = imgblob;
                imageObj.onload = function(){
                    cxt.clearRect(0,0,500,500);
                    cxt.putImageData(NowCanvas,0,0);
                    cxt.drawImage(imageObj,0,0,500,500);
                    
                    
                   //生成base64（图片对象就是mycanvas画布里的图片）
                   let avatar =     mycanvas.toDataURL('image/png');
                   //动态生成下载按钮（a标签的download属性来实现）
                   let saveBtn = document.createElement('a');
                   saveBtn.href = avatar;
                   saveBtn.download = "wt43"+Date.now();  
                   saveBtn.innerText = '保存图片';
                   saveBtn.className = 'uploadBtn';
                   document.body.insertBefore(saveBtn,mycanvas);
                }    
            }
            
        }