本地图片上传与预览的实现

在做个人网站的时候，准备用canvas来生成个人的头像，然后提供预览，同时也想支持用户自己上传头像，于是就开始进行着手写了图片的拖拽上传。

1 图片拖拽类的功能封装

获取图片信息-->将图片加载到canvas去压缩处理-->页面渲染/提交上传

class Drag{
        constructor(cssSelector){
            this.css=cssSelector;
            this.Upstatus=0;
            this._drag(cssSelector);
            this.bili=2;

        }

    }

这里定义了一个类，并设置了其属性

• css =>捕获输入的dom的选择器
• Upstatus=>上传的进度，初始为0
• img =>需要显示的Image元素
• data =>压缩后的base64编码
• file =>需要加在文件
• _drag =>执行拖拽
• bili =>设置图片压缩的比例

_drag(cssSelector){
            var _self=this;
            var holder=_self.holder=document.querySelector(cssSelector);
            holder.ondragover=function(e){
                e.preventDefault();
            }
            holder.ondragend=function(e){
                e.preventDefault();
            }
            holder.ondrop=function(e){
                e.preventDefault();
                var file=e.dataTransfer.files;
                _self.file=file[file.length-1];
                _self._render();
                e.preventDefault();
            }
        }

拖拽的行为主要是依赖H5的ondrage事件来捕获拖拽的状态与属性，使用e.dataTransfer.files来获取拖拽过来的文件信息，会以数组的形式来保存文件信息，所以使用file[file.length-1]来获取最后一张图片文件的信息，然后交由_render去渲染到页面上，使用e.preventDefault()来阻止浏览器的默认事件

        _render(){
            this.readFile();
            holder.appendChild(this.img);
        }

渲染的方法里只调用了文件读取的函数，然后把Image元素添加到面板中

readFile(){
            var reader=new  FileReader();
            var img   =new Image();
            var _self=this;
            reader.readAsDataURL(_self.file);
            reader.onload=function(e){
                img.src=e.target.result;
                _self.gzip(img);
                console.log(_self.data);
                img.src=_self.data;
            }
        this.img=img;

    }

读取文件主要是使用了readFile的API来加载之前通过dataTransfer.files来获取的文件，然后加载完成后交由img来生成图片，再交由gzip来进行压缩

gzip(img){
            var offsetCanvas=document.createElement('canvas');
            offsetCanvas.width = img.width/this.bili;
            offsetCanvas.height = img.height/this.bili;
            if(offsetCanvas.getContext){
                var ctx=offsetCanvas.getContext('2d');
                ctx.drawImage(img,0,0,offsetCanvas.width,offsetCanvas.height);
                this.data= offsetCanvas.toDataURL('image/png');
            }

        }

这里主要是通过canvas来将图片的大小来进行缩放，然后使用toDataURL来保存base64格式的图片信息
,再将数据交由img去加载
最后效果图

后面再增加上传与进度的功能