canvas壓縮圖片

1.canvas.toDataUrl壓縮圖片

canvas的toDataUrl方法能夠將內容導出爲base64編碼格式的圖片，採用base64編碼將比源文件大1/3，可是該方法能夠指定導出圖片質量，因此前端可實現上傳圖片的壓縮。先經過fileApi拿到本地圖片地址，而後新建一個Img元素，圖片繪製到canvas中後再將其導出（壓縮）。例如：

$(':file').on('change',function(){
        var file = this.files[0];
        var url = webkitURL.createObjectURL(file);

        /* 生成圖片
        * ---------------------- */
        var $img = new Image();
        $img.onload = function() {

            //生成比例
            var width = $img.width,
                    height = $img.height,
                    scale = width / height;
            width = parseInt(800);
            height = parseInt(width / scale);

            //生成canvas
            var $canvas = $('#canvas');
            var ctx = $canvas[0].getContext('2d');
            $canvas.attr({width : width, height : height});
            ctx.drawImage($img, 0, 0, width, height);
            var base64 = $canvas[0].toDataURL('image/jpeg',0.5);

            //發送到服務端
            $.post('upload.php',{formFile : base64.substr(22) },function(data){
                $('#php').html(data);
            });

        }
        $img.src = url;

    });

2.存在問題

可是此方法存在一些問題：

　　1.在ios上當圖片過大時圖片會被壓扁

　　2.在android上沒法指定壓縮質量

　　3.圖片經過fileApi讀取進來，豎着拍的圖片會橫置

好在這些問題都有解決方案：

　　1.使用ios-imagefile-megapixel，將大圖拆分爲一塊塊的小圖讀取到小canvas再拼起來(還能夠設置圖片旋轉)

　　2.使用javascript_jpeg_encode

　　3.使用JpegMeta（沒有測過）

參考自：http://my.oschina.net/hzplay/blog/160806