头像上传二三事

Posted 三小胖

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文件。

3.后台接收

   在这之后有一个问题困扰了我许久:blob文件后台怎么转成原来的格式(比如jpg)?

   在我面对收到的blob文件一脸懵逼的许久之后,请教了老张,老张很自然的打开了blob文件所在的文件夹,然后我看到了图片预览。。。(至少ubuntu下是可以看的)

   这时候我才知道,实际上是不用转格式的,我差的只是一个后缀。(比如.jpg)

    然后稍微改了下multer的设置就可以了。

http://www.w3school.com.cn/tags/canvas_drawimage.asp

以上是关于头像上传二三事的主要内容,如果未能解决你的问题,请参考以下文章

自定义dialog二三事

自定义popupwindow二三事

多态与继承的二三事

远程漏洞远程代码执行漏洞的二三事

关爱码农成长:关于写代码二三事

Eclipse搭建Hadoop开发环境二三事