在做个人网站的时候,准备用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去加载
最后效果图
后面再增加上传与进度的功能