75-js前端压缩图片

html:

<span class="f-db tit">上传图片：</span>
				<div class="info">
					<input type="file" accept='image/*' class="text" id="pic" onchange="readAsDataURL1()" multiple/>
				</div>

js:

function readAsDataURL1(){

		var formData = new FormData();
		var fileObj = $("#pic")[0].files[0];
		if(!fileObj){
			return;
		}
		if(fileObj.size/1024>1024){
			photoCompress(fileObj,{ quality: 0.2},function(base64Codes){
				var bl = convertBase64UrlToBlob(base64Codes)
				var fileName = fileObj.name;
				formData.append("imgFile", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
				$.ajax({
					url : ctx+'/qyapi/img-upload.do',
					async:false,
					type : 'post',
					data : formData,
					processData : false,
					contentType : false,
					success : function(value) {
						var result = JSON.parse(value);
						if(parseInt(result.code)>0){
							picShow.innerHTML = '<img data-original="'+result.url+'" src="'+result.url+'" alt="" style="width:95%;max-height: 500px;"/>';
							$("#url").val(result.url+splitStr+fileName);
							setTimeout(function (){
								resetViewer();
							},3000)

						}else{
							alert(result.msg);
						}
					}
				});
			});
		}

	}

/*
        三个参数
        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);
			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});
	}