头像上传二三事

Posted 2020-08-09 三小胖

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了头像上传二三事相关的知识，希望对你有一定的参考价值。

之前注册功能还留了一个小尾巴：完善图像上传功能。之前只是简单的input上传，没有图片做任何处理。

以下说的就是如何将图片进行裁剪得到需要的尺寸并上传。（参考文献：http://www.open-open.com/lib/view/open1464825507226.html）

并将这些功能进行了简单的封装（https://github.com/zhangdongming1989/upload_helper）

1.图片DataUri

看到这个需求不由得想到了之前看到的dataUri。dataUri实际上就是一个规定格式字符串。这个字符串实际就是是用base64编码后的图片数据。

比如这就是一个datauri图片

data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge 8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1h LnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g 77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

把这一段粘贴到浏览器地址栏就会出现一张小图片。

这样做的好处是可以直接把datauri加到css或者html中，而不用再单独传一个图片——减少http请求。但是也有问题，base64要比二进制编码大1/3。在处理图片的过程中会多次涉及datauri，但是最终没有用它做传输格式，因为我们的后台存的都是单独的图片文件。

2.实现流程

uploadHelper=function(event,imgSize,returnType,callback)

这个是暴露的程序入口，需要放到文件input的onchange监听事件回调中。第一个event就是这个change事件，之后的参数是图片尺寸，输出类型，完成回调。

下面是一个例子，其中dataUri是一个img标签

var oFile=document.querySelector(‘#file-input‘);
    var oDataUri=document.querySelector(‘dataUri‘);
    oFile.onchange=function (event) {
        uploadHelper(event,{width:100,height:100},‘dataUri‘,function (dataURI) {
            document.querySelector(‘#dataUri‘).src=dataURI;
        });
    };

下面按照数据流来说明处理过程，这一系列过程中存在大量异步回调，所以数据流和程序编写顺序有些区别。

用event.target.file[0]拿到文件之后调用

function compressImage(file,size,callback)

这个方法是resize图片的主程序，然而这个方法没什么实际内容。其中会调用方法

fileToDataUrl(file,function (dataUrl)

这个方法的作用是将file转换成dataUri，当然这一步并不是必需的。

转换成datauri之后就到了压缩的核心方法

function compressDataUrl(dataURL,size,callback)

这个方法的思路是创建一个图片实例，将之前得到的datauri赋给它的img.src，然后使用canvas的图片重绘方法

ctx.drawImage(img,cutL,cutT,cutW,cutH,0,0,canvas.width,canvas.height);

参考文献：http://www.w3school.com.cn/tags/canvas_drawimage.asp

关于drawImage，首先这个方法是不是在canvas上，而是在canvas的上下文（context）上的一个方法。

其次，这个方法的参数比较多，因为这个方法需要让你指定用哪个图片作为源文件（img），之后四个cut开头的参数是让用户指定原图上绘制的起始坐标（cutL，cutT）,然后

指定取原图多长多宽进行绘制(cutW,cutH)。之后是在canvas画布的哪个坐标开始绘制（0，0）最后是指定画布上新图像的宽高。其中除了0，0 以及我们指定的新图片大小以外都需要进行计算。计算的思路是：既然指定了新图片的长宽，那么要想让新图片不发生长或者宽的拉伸/压缩，需要保证原图宽高比和新图一致，如果不一致就裁剪掉。裁剪的时候默认是左右对称裁剪，取得中间部分。

绘制结束之后将canvas转成datauri格式。值得一提的是，对于某一格式，图片大小基本是和尺寸相关的，100*100的图片只有5k左右大小

如果你需要将文件作为表单的一项上传，也许你还需要转成blob文件。实际上，对于有input=file表单（请求格式：multipart/form-data），

其中的文件（非字符串）上传都是用的blob格式。转化可以使用方法

function dataUriToBlob（dataUri）

这个方法做的事情就是把dataUri的字符串分隔解析，因为datauri除了数据还有文件格式。

最后创建blob文件。