js图片压缩上传

浏览数：17 / 时间：2015年06月09日

最近公司的移动产品相约app要做一次活动，涉及到图片上传，图片又不能太大，不然用户体验太差，必须先压缩再上传，所以用到了html5的canvas和FileReader，代码先上，小弟前端经验不足，代码写得有点乱，有什么不足之处，望大神指点！

<div class="free-upload">
    <p>上传您的约会照片，一张合影、一张票据哦！</p>
    <div class="free-upload-photo">
        <span id="photo_img"></span>
            <input type="file" id="photo" />
        </div>
        <div class="free-upload-bill">
            <span id="bill_img"></span>
        <input type="file" id="bill" />
    </div>
    <p id="photo_loading">正在上传...</p>
</div>

js用到了jquery

var photo = $(‘#photo‘);

function isCanvasSupported(){
    var elem = document.createElement(‘canvas‘);
    return !!(elem.getContext && elem.getContext(‘2d‘));
}

photo.on(‘change‘, function(event){
    if(!canvasSupported){
        return;
　　}
　　　　　　
    compress(event, function(base64Img){
　　　　　　$.ajax({
　　　　　　‘url‘ : ‘/?s=free/upload‘,
　　　　　　‘type‘ : ‘post‘,
　　　　　　‘data‘ : {‘base64Img‘ : base64Img},
　　    	  ‘success‘ : function(ret){
　　　　	             //拿到php传过来的图片地址
　　　　　   }
　　　　　});
　　　});
});

function compress(event, callback){
    var file = event.currentTarget.files[0];
    var reader = new FileReader();

    reader.onload = function (e) {

        var image = $(‘<img/>‘);
        image.on(‘load‘, function () {
             var square = 700;
             var canvas = document.createElement(‘canvas‘);

             canvas.width = square;
             canvas.height = square;

             var context = canvas.getContext(‘2d‘);
             context.clearRect(0, 0, square, square);
             var imageWidth;
             var imageHeight;
             var offsetX = 0;
             var offsetY = 0;

            if (this.width > this.height) {
                  imageWidth = Math.round(square * this.width / this.height);
                  imageHeight = square;
                 offsetX = - Math.round((imageWidth - square) / 2);
           } else {
                 imageHeight = Math.round(square * this.height / this.width);
                 imageWidth = square; 
                 offsetY = - Math.round((imageHeight - square) / 2); 
           }

            context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
            var data = canvas.toDataURL(‘image/jpeg‘);
            callback(data);
         });

          image.attr(‘src‘, e.target.result);
       };
 
     reader.readAsDataURL(file);
}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js图片压缩上传