ajax实现base64 图片上传示例 可压缩图片大小

index.html

	
		
		
		
		
		
		
		

	
	
		

			

				上传您的照片，上传图片
			
			

				
				
			
		
		
	
	

touxiang.php 示例；

1,'msg'=>'上传成功！') ) );
            // echo '图片上传成功
![](' .$img_path. ')';

        }else{

            // 上传失败
            die(json_encode(array('res'=>0,'msg'=>'上传失败！') ) );

        }

    }else{

        //文件类型错误
        die(json_encode(array('res'=>0,'msg'=>'图片上传类型错误！') ) );

    }
    
}else{
    //文件错误
    die(json_encode(array('res'=>0,'msg'=>'文件错误！') ) );

}

ys.js 压缩核心文件

//判断是否存在画布
function isCanvasSupported() {
	var elem = document.createElement('canvas');
	return !!(elem.getContext && elem.getContext('2d'));
}
 
//压缩方法
function compress(event, callback) {
	if ( typeof (FileReader) === 'undefined') {
		console.log("当前浏览器内核不支持base64图标压缩");
		//调用上传方式  不压缩
	} else {
		try {
			var file = event.currentTarget.files[0];
			if(!/image\/\w+/.test(file.type)){   
				alert("请确保文件为图像类型");  
				return false;  
			}
			var reader = new FileReader();
			reader.onload = function (e) {
				var image = $('');
				image.load(function () {
				console.log("开始压缩");
				var square = 700; // 定义变量
				var canvas = document.createElement('canvas');
				canvas.width = square; // 新图片的width
				canvas.height = square;// 新图片的height	
				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);
		} catch(e) {
			console.log("压缩失败!");
			//调用上传方式  不压缩
		}
	}
}