移动端利用html5对照片处理的教程实例

//对图片进行旋转，压缩的方法，最终返回base64  渲染给img标签的src

compress(img, fileType) {

      var degree=0,drawWidth,drawHeight,width,height;

      drawWidth=img.width;

      drawHeight=img.height;

      //以下改变一下图片大小

     var maxSide = Math.max(drawWidth, drawHeight);

     if (maxSide > 1024) {

           var minSide = Math.min(drawWidth, drawHeight);

            minSide = minSide / maxSide * 1024;

            maxSide = 1024;

           if (drawWidth > drawHeight) {

                drawWidth = maxSide;

                drawHeight = minSide;

            } else {

                drawWidth = minSide;

                drawHeight = maxSide;

            }

    }

    var canvas=document.createElement('canvas');

    canvas.width=width=drawWidth;

    canvas.height=height=drawHeight;

    var context=canvas.getContext('2d');

    //判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式

    if($.device.ios){

         switch(this.orientation){

              //iphone横屏拍摄，此时home键在左侧

             case 3:

                   degree=180;

                   drawWidth=-width;

                   drawHeight=-height;

                    break;

          //iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)

              case 6:

                    canvas.width=height;

                    canvas.height=width;

                    degree=90;

                    drawWidth=width;

                    drawHeight=-height;

                    break;

              //iphone竖屏拍摄，此时home键在上方

               case 8:

                      canvas.width=height;

                       canvas.height=width;

                       degree=270;

                       drawWidth=-width;

                       drawHeight=height;

                       break;

          }

     }

     //使用canvas旋转校正

     context.rotate(degree*Math.PI/180);

     context.drawImage(img,0,0,drawWidth,drawHeight);

     // 压缩0.5就是压缩百分之50

     var base64data = canvas.toDataURL(fileType, 0.5);

     canvas = context = null;

     this.urlbase = base64data;

      return base64data;

},

toPreviewer(dataUrl) {

       previewer.src = dataUrl;

 },