移動端網頁上傳圖片功能簡析（主要應用場景為微信公眾號）

功能簡介：

在微信公眾號中，要開發一個照片上傳功能，可以拍照，可以選擇相冊圖片，可以預覽。

開發思路：

用戶點擊上傳按鈕--》拍照或者選擇圖片--》調用上傳接口--》后來程序處理（生成縮略圖，旋轉圖片）上傳至fastdfs服務器--》返回上傳圖片的縮略圖地址和原圖片地址顯示在已上傳圖片區域。

用戶對於已上傳的圖片可以刪除.如刪除，對應fastdfs中的原始圖片和縮率圖一並刪除。

參考文章：

http://blog.csdn.net/linlzk/article/details/48652635

遇到的問題：

1，上傳圖片

采用表單方式上傳

		               <form class="uploadForm" enctype="multipart/form-data">
		            	<input class="health-assay-info-id" name="healthAssayInfoId" type="hidden"><!--此處處理業務問題的id，上傳圖片后，對應的相關業務數據的id-->
		                <label class="btn-file">
		                	<input type="file" accept="image/*"  name="pics" capture="camera" onchange="form_pics.addImg(this);">
		                    <img src="../images/upimg.png" alt="">
		                </label>
		               </form>

　代碼中的紅色部分很重要。如果沒有此限制，部分安卓機型上無法選擇照相機。

2，ios手機拍照，橫拍和豎拍旋轉問題

使用引入exif.js。獲取當前 照相機拍攝的照片的旋轉度數。

ps：此處下載 http://code.ciaoca.com/javascript/exif-js/　

EXIF.getData(document.getElementById('imgElement'), function(){
  var Orientation  = EXIF.getTag(this, 'Orientation');
  //ajaxSubmit上傳處理代碼，把 Orientation作為參數，傳到后台。

});

　后台處理：

            if (picOrientation != null && picOrientation > 1) {
                int degree = 0;
                switch (picOrientation) {
                    case 6:
                        degree = 90;
                        break;
                    case 8:
                        degree = 270;
                        break;
                    case 3:
                        degree = 180;
                        break;
                    default:
                        degree = 0;
                        break;
                }
            }

　旋轉圖片代碼（旋轉要重新計算圖片的寬高。http://www.oschina.net/code/snippet_818200_45972）

    public static BufferedImage rotateImage(final BufferedImage bufferedImage, final int angle) {
        
        int width = bufferedImage.getWidth();
        int height = bufferedImage.getHeight();
        int new_w = 0, new_h = 0;
        int new_radian = angle;
        if (angle <= 90) {
            new_w = (int)(width * Math.cos(Math.toRadians(new_radian)) + height * Math.sin(Math.toRadians(new_radian)));
            new_h = (int)(height * Math.cos(Math.toRadians(new_radian)) + width * Math.sin(Math.toRadians(new_radian)));
        }
        else if (angle <= 180) {
            new_radian = angle - 90;
            new_w = (int)(height * Math.cos(Math.toRadians(new_radian)) + width * Math.sin(Math.toRadians(new_radian)));
            new_h = (int)(width * Math.cos(Math.toRadians(new_radian)) + height * Math.sin(Math.toRadians(new_radian)));
        }
        else if (angle <= 270) {
            new_radian = angle - 180;
            new_w = (int)(width * Math.cos(Math.toRadians(new_radian)) + height * Math.sin(Math.toRadians(new_radian)));
            new_h = (int)(height * Math.cos(Math.toRadians(new_radian)) + width * Math.sin(Math.toRadians(new_radian)));
        }
        else {
            new_radian = angle - 270;
            new_w = (int)(height * Math.cos(Math.toRadians(new_radian)) + width * Math.sin(Math.toRadians(new_radian)));
            new_h = (int)(width * Math.cos(Math.toRadians(new_radian)) + height * Math.sin(Math.toRadians(new_radian)));
        }
        BufferedImage toStore = new BufferedImage(new_w, new_h, BufferedImage.TYPE_INT_RGB);
        Graphics2D g = toStore.createGraphics();
        AffineTransform affineTransform = new AffineTransform();
        affineTransform.rotate(Math.toRadians(angle), width / 2, height / 2);
        if (angle != 180) {
            AffineTransform translationTransform = findTranslation(affineTransform, bufferedImage, angle);
            affineTransform.preConcatenate(translationTransform);
        }
        g.setColor(Color.WHITE);
        g.fillRect(0, 0, new_w, new_h);
        g.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR);
        g.drawRenderedImage(bufferedImage, affineTransform);
        g.dispose();
        return toStore;
    }

　　3.使用

EXIF.getData獲取獲取拍攝方向時，感覺此方式是異步的
如果這樣寫

var Orientation = null;
EXIF.getData(document.getElementById('imgElement'), function(){
    Orientation = EXIF.getTag(this, 'Orientation');
  
});

//ajaxSubmit上傳處理代碼，把 Orientation作為參數，傳到后台。

　就會先去執行上傳，然后才執行

EXIF.getData的回調函數獲取到Orientation 。還沒有想到有什么好的解決方案，索性把上傳代碼邏輯寫到了EXIF.getData的回調函數里面。
4，展示大圖
展示大圖時需要計算手機屏幕的分辨率。我的策略如下

         var windowW = $(window).width();
         var windowH = $(window).height();
         var realWidth = this.width;
         var realHeight = this.height;
         var imgWidth, imgHeight;
         var scale = 0.8;
         
         if(realHeight>windowH*scale && realWidth>windowW) {
        	 imgWidth = windowW;
        	 imgHeight = imgWidth/realWidth*realHeight;
         } else if(realHeight>windowH*scale){
        	 imgHeight = windowH*scale;
             imgWidth = imgHeight/realHeight*realWidth;
         } else if(realWidth>windowW){
        	 imgWidth = windowW;
        	 imgHeight = imgWidth/realWidth*realHeight;
         } else {
             imgWidth = realWidth;
             imgHeight = realHeight;
         }
         $("#bigimg").css("width",imgWidth);

　　如果實際寬度>屏幕寬度，保證寬是沾滿屏幕，調整高度