使用js压缩上传图片

在使用华丹智能web报表快速开发平台时，遇到一个需求，先要上传图片的时候，将图片进行压缩后再上传到服务器，具体代码如下

<script type="text/javascript">
		
/*
	三个参数
	file：一个是文件(类型是图片格式)，
	w：一个是文件压缩的后宽度，宽度越小，字节越小
	objDiv：一个是容器或者回调函数
	photoCompress()
 */
function photoCompress(file,w,objDiv){
	var ready=new FileReader();
	/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
	ready.readAsDataURL(file);
	ready.onload=function(){
		var re=this.result;
		canvasDataURL(re,w,objDiv)
	}
}
function canvasDataURL(path, obj, callback){
	var img = new Image();
	img.src = path;
	img.onload = function(){
		var that = this;
		// 默认按比例压缩
		var w = that.width,
			h = that.height,
			//scale = w / h;
		//w = obj.width || w;
		//h = obj.height || (w / scale);
		w=800;
		h=600;
		var quality = 0.7;  // 默认图片质量为0.7
		//生成canvas
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		// 创建属性节点
		var anw = document.createAttribute("width");
		anw.nodeValue = w;
		var anh = document.createAttribute("height");
		anh.nodeValue = h;
		canvas.setAttributeNode(anw);
		canvas.setAttributeNode(anh);
		ctx.drawImage(that, 0, 0, w, h);
		// 图像质量
		if(obj.quality && obj.quality <= 1 && obj.quality > 0){
			quality = obj.quality;
		}
		// quality值越小，所绘制出的图像越模糊
		var base64 = canvas.toDataURL('image/jpeg', quality);
		// 回调函数返回base64的值
		callback(base64);
	}
}

/**
 * 将以base64的图片url数据转换为Blob
 * @param urlData
 *            用url方式表示的base64图片数据
 */
function convertBase64UrlToBlob(urlData){
	var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
		bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
	while(n--){
		u8arr[n] = bstr.charCodeAt(n);
	}
	return new Blob([u8arr], {type:mime});
}

//上传文件方法
function UpladFile() {
	var fileObj = document.getElementsByName("File")[0].files[0]; // js 获取文件对象
	var url = "hytorc.uploadRepairFile.do"; // 接收上传文件的后台地址 
	var formObj = document.forms[0];
	var form = new FormData(formObj); // FormData 对象
	var filenameObj = document.getElementsByName("FILENAME")[0];
	photoCompress(fileObj, {quality: 0.2}, function(base64Codes){
		
		var bl = convertBase64UrlToBlob(base64Codes);
		form.set("File", bl, filenameObj.value+".jpg"); // 文件对象 append(元素名称,内容,当内容为file或者blob时的文件名)
	
		var xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
		xhr.open("post", url, false); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
		xhr.send(form); //开始上传，发送form数据
	});
}
</script>

通过上述方法可以将图片进行压缩上传。

华丹智能WEB报表快速开发平台的确很好用，能够完美的支持自定义内容扩展，有兴趣也可以看一下，网址https://www.huadaninfo.com/