图片压缩、上传

图片上传

图片多张上传时在input中添加multiple属性

<img  type="file"   multiple="multiple"/>

1、上传图片 

<label for="fengmian" class="btn btn-success btn-xs">上传封面</label>
<input type="file" id="fengmian" style="display: none;"/>
<img src="" />


$(function(){

    $("#fengmian").change(function(){
        var file = $(this).prop('files')[0];
        uploadFile(file);
    })
})

//上传文件
function uploadFile(file){

	fileName = file.name;
	var fileType = fileName.substr(fileName.lastIndexOf(".")).toUpperCase();
	if (fileType == ".JPG" || fileType == ".PNG" ) {

		var size = file.size;
		if(size > 500000){//进行压缩
			photoCompress(file,{"quality":0.2},function(imgBase64){
				uploadImgBase64(imgBase64);
			})
		}else{
			uploadImg(file);
		}
	}else{
		alert("封面、简介仅限于jpg或png格式的图片");
	    return false;
	}
	
}

2、使用base64或者file上传

//file上传文件
function uploadImg(file){
	var formData = new FormData();
	formData.append("file",file);
	$.ajax({
		url:"${ctx}/upload/uploadFile",
		data:formData,
		type:"post",
		dataType:"json",
		processData: false,
	    contentType: false,
		success:function(data){
			if(data.success == true){
			   var windowURL = window.URL || window.webkitURL;
			    var dataURL;
			    dataURL = windowURL.createObjectURL(file);
			    $("src").attr("src",dataURL);
				$("#"+objId).val(data.msg);
			}else{
				alert("图片信息有误");
			}
		},error:function(){
			alert("信息有误");
		}
	})
}


//base64上传文件
function uploadImgBase64(base64){
	$.ajax({
		url:"/Share/base64/base64",
		data:{"base64":base64},
		type:"post",
		dataType:"json",
		success:function(data){
			if(data.success == true){
				var base64Url = data.body.url;
				$("src").attr("src",base64);
				$("#"+picCoverUrl).val(base64Url);
				alert("上传成功");
			}else{
				alert("信息有误");
			}
		},error:function(){
			alert("信息有误");
		}
	})
}

图片压缩

• 图片前台压缩

        1、上传速度加快

        2、减少对服务器的压力

• 图片后台压缩

 1、图片前台压缩

1、读取文件

<label for="fengmian" class="btn btn-success btn-xs">上传封面</label>
<input type="file" id="fengmian" style="display: none;"/>


$(function(){

    $("#fengmian").change(function(){
        var file = $(this).prop('files')[0];
        photoCompress(file,function(image64){
            $("img").attr("src",image64);
        })
    })
})


//file 图片
//callBack  回调函数
function photoCompress(file,callBack){

    //读取文件
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(){
        var re = this.result;    
        compress(re,callBack);
    }
}

2、压缩文件

//使用canvas重置图像
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);
	}
}

2、图片后台压缩

 1、导入jar包

    <dependency>
      <groupId>net.coobird</groupId>
      <artifactId>thumbnailator</artifactId>
      <version>0.4.8</version>
    </dependency>

 2、使用Thumbnails

Thumbnails.of(file.getInputStream()).scale(1f)
						.outputQuality(1f).toFile(path);

 备注：

• scale修改大小
• outputQuality修改质量

上传文件后台处理

1、通过流上传 

/**
	 * 通过流上传文件
	 * 
	 * @param file  上传文件
	 * @param path  绝对路径
	 * @return
	 */
	public static Map<String, Object> uploadFileByInput(MultipartFile file,
			String path) {
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("success", false);
		try {
			InputStream input = file.getInputStream();
			// 创建一个文件输出流
			FileOutputStream out = new FileOutputStream(path);
			// 创建一个缓冲区
			byte buffer[] = new byte[1024];
			// 判断输入流中的数据是否已经读完的标识
			int len = 0;
			// 循环将输入流读入到缓冲区当中，(len=in.read(buffer))>0就表示in里面还有数据
			while ((len = input.read(buffer)) > 0) {
				out.write(buffer, 0, len);
			}
			input.close();
			// 关闭输出流
			out.close();
			map.put("success", true);
		} catch (Exception e) {
			System.out.println(e.getMessage());
		}
		return map;
	}

2、通过transferTo

/**
	 * 上传文件
	 * 
	 * @param file
	 * @param path
	 *            绝对路径
	 * @return
	 */
	public static Map<String, Object> uploadFile(MultipartFile file,
			String path) {
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("success", false);
		try {
			File newFile = new File(path);
			File parentFile = newFile.getParentFile();
			if (!parentFile.exists()) {
				parentFile.mkdirs();
			}
			String fileName = file.getOriginalFilename();
			String fileType = fileName.substring(fileName.lastIndexOf("."))
					.toUpperCase();
			Long size = file.getSize();
			if (imgType.contains(fileType) && imgSize < size) {
				Thumbnails.of(file.getInputStream()).scale(1f)
						.outputQuality(1f).toFile(path);
			} else {
				file.transferTo(newFile);
			}
			map.put("success", true);
		} catch (Exception e) {
			System.out.println(e.getMessage());
		}
		return map;
	}

 

参考文章

上传前压缩          https://blog.csdn.net/qq_42213965/article/details/98616030

                            https://blog.csdn.net/Clara_G/article/details/87936853

FileReader          https://blog.csdn.net/lucky541788/article/details/86675495

                            https://www.jb51.net/article/135767.htm

Thumbnails详解   https://blog.csdn.net/qq_25508039/article/details/82257436