angularjs之手机端input图片上传（续）

为啥要写个续呢？解决一个问题：图片压缩

BTW，本文是针对ajax提交，如果本身就是form表单提交就不需要看了。

上一篇里说到h5可以用FileReader获取到图片信息，如base64，按道理这就可以传给服务端了，但是当图片很大的时候，这个字符串可能会写满好几张a4纸，这显然不合适，再者字符串太大服务端也接受不到- -于是发送之前压缩一下是个不错的选择，上代码：

 var zipPic=function (result) {      var canvas=document.getElementById("uploadImg");      var cxt=canvas.getContext('2d');      var img=new Image();      img.src= result;      canvas.width=640;      canvas.height=640*(img.height/img.width);      cxt.drawImage(img,0,0,640,canvas.height);      return canvas.toDataURL("image/jpeg",0.9); }

cxt.drawImage会将result所代表的图片绘制到canvas上去，并且重新指定了图片的宽高，
drawImage有3个方法：
在画布上定位图像：
context.drawImage(img,x,y);
在画布上定位图像，并规定图像的宽度和高度：
context.drawImage(img,x,y,width,height);
剪切图像，并在画布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
具体参数意思可以到w3school去看。

canvas.toDataURL就是压缩过后的base64，第一个参数是格式，有的时候传的图片时png什么的都可以转成jpg，第二个参数可以理解为画面质量，0~1，很好理解。

ok，到此为止，一切都很美好，然而……
以上方法在Android上都运行正常，然后在ios上toDataURL取到的却是空，百度之，发现ios自带canvas坑（以下摘自http://www.cnblogs.com/zhwl/p/4961473.html）：
首先是图片的大小，如果图片的大小超过两百万像素，图片也是无法绘制到canvas上的，调用drawImage的时候不会报错，但是你用toDataURL获取图片数据的时候获取到的是空的图片数据。
再者就是canvas的大小有限制，如果canvas的大小大于大概五百万像素（即宽高乘积）的时候，不仅图片画不出来，其他什么东西也都是画不出来的。

应对第一种限制，处理办法就是瓦片绘制了。瓦片绘制，也就是将图片分割成多块绘制到canvas上，我代码里的做法是把图片分割成100万像素一块的大小，再绘制到canvas上。
应对第二种限制，我的处理办法是对图片的宽高进行适当压缩，我代码里为了保险起见，设的上限是四百万像素，如果图片大于四百万像素就压缩到小于四百万像素。四百万像素的图片应该够了，算起来宽高都有2000X2000了。

定义两个canvas：

    var canvas = document.createElement("canvas");    var ctx=canvas.getContext('2d');    var tCanvas = document.createElement("canvas");    var tctx = tCanvas.getContext("2d");代码片

压缩方法：

    //使用canvas对大图片进行压缩    function compress(img) {      var width = img.width;      var height = img.height;      //如果图片大于四百万像素，计算压缩比并将大小压至400万以下      var ratio;      if ((ratio = width * height / 4000000) > 1) {        ratio = Math.sqrt(ratio);        width /= ratio;        height /= ratio;      } else {        ratio = 1;      }      canvas.width = width;      canvas.height = height;      // 铺底色      ctx.fillStyle = "#fff";      ctx.fillRect(0, 0, canvas.width, canvas.height);      //如果图片像素大于100万则使用瓦片绘制      var count;      if ((count = width * height / 1000000) > 1) {        count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片      // 计算每块瓦片的宽和高        var nw = ~~(width / count);        var nh = ~~(height / count);        tCanvas.width = nw;        tCanvas.height = nh;        for (var i = 0; i < count; i++) {          for (var j = 0; j < count; j++) {            tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);            ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);          }        }      } else {        ctx.drawImage(img, 0, 0, width, height);      }      //进行最小压缩      var ndata = canvas.toDataURL('image/jpeg', 0.1);      // console.log('压缩前：' + initSize);      // console.log('压缩后：' + ndata.length);      // console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");      tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;      return ndata;    }

压缩方法有了，还要注意一点就是调用的时候，我当时在这花了蛮久时间0.0

reader.onload = function (e) {            var result=this.result;            $scope.success.up = true;            var img=new Image();            img.src= result;            var maxsize = 100 * 1024;            if(result.length<=maxsize){              transferImgSrc=result;            }else {              if(img.complete){//一定要等图片加载完了再调压缩                callback();              }else {                img.onload=callback;              }              function callback() {                transferImgSrc = compress(img);//此处得到base64                img = null;              }            } }