h5上传图片及预览

第一次做图片上传，记录一些问题。

1，图片的base64编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。而网页上的每一个图片，都是需要消耗一个http请求下载而来的，使用base64就不用请求http。

2，上传图片：

1 <div id="ImgPr"></div>
2 <input class="click-upload" type="file" id="up" accept="image/*">

　 3，图片转base64（readAsDataURL方法用于读取指定Blob或File的内容。当读操作完成，readyState变为DONE, loadend被触发，此时result属性包含数据：URL以base64编码的字符串表示文件的数据）：

 1 function picUpload() {
 2     var preview = document.querySelector('img');
 3     var file = document.querySelector('input[type=file]').files[0];
 4     var reader = new FileReader();
 5         reader.onloadend = function () {
 6         preview.src = reader.result;
 7     }
 8     if (file) {
 9         reader.readAsDataURL(file);
10     } else {
11         preview.src = "";
12     }
13 }

4，压缩图片并转base64（通过canvas把图片进行大小压缩）：

 1 function picUpload(){
 2     var me=this;
 3     var img = new Image();
 4     $('#up').on('change',function(){
 5         var ViewWidth=$(this).width();
 6         var ViewHeight=$(this).height();
 7         var file = this.files[0];
 8         var URL = URL || webkitURL;
 9         img.src=URL.createObjectURL(file);
10         img.onload = function(){
11             var imgMe=this,
12                 imgWidth=0,
13                 imgHeight= 0,
14                 w = imgMe.width,
15                 h = imgMe.height,
16                 scale1 = w/ViewWidth,
17                 scale2 = h/ViewHeight;
18             imgWidth=parseInt(Math.floor(w/scale1));
19             imgHeight=parseInt(Math.floor(h/scale2));
20             var canvas = document.createElement('canvas');
21             var img = document.createElement('img');
22             $('#ImgPr').html(img);   
23             var ctx = canvas.getContext('2d');
24             canvas.width = ViewWidth;
25             canvas.height = ViewHeight;
26             ctx.drawImage(imgMe,0,0,imgWidth,imgHeight);
27             me.src=canvas.toDataURL('image/jpeg');
28             $(img).prop("src",me.src);
29         };
30     });
31 };