HTML5+canvas实现图片的压缩上传

╰+攻爆jí腚メ 2022-05-24 10:24 237阅读 0赞

1.图片上传输入框

2.上面时候触发onchange

$('.fileUpload').on('change', function () {
        id = $(this).parent().attr("id");
        //上传成功移除file input
        $(this).parent().children().remove();
        var _this = $(this)[0],
            _file = _this.files[0],//里面存放是图片信息
            fileType = _file.type;
        console.log(_file.size);
        if(/image\/\w+/.test(fileType)){
            $.showLoading("图片上传中...");
            var fileReader = new FileReader();
            fileReader.lastModifiedDate = _file.lastModifiedDate
            fileReader.name = _file.name
            fileReader.readAsDataURL(_file);
            fileReader.onload = function(event){
                var result = event.target.result;   //返回的dataURL
                var image = new Image();
                image.src = result;
                image.onload = function(){  //创建一个image对象，给canvas绘制使用
                    //通过canvas生成base64字符串，后台会解析这个字符串，dataURL是最终生成的字符串

var canvas = document.createElement("canvas");
                  canvas.width = this.width;
                  canvas.height = this.height;
                  var c = canvas.getContext("2d");
                  c.drawImage(this, 0, 0, this.width, this.height);
                  var dataURL = canvas.toDataURL("image/jpeg");

$.post(ctx + '/base/front/photoInfo/uploadPicture.sy',\{ 'file': dataURL, //base64字符串 'fileDate': (typeof (event.target.lastModifiedDate) != 'undefined' ? event.target.lastModifiedDate : new Date()).Format("yyyy-MM-dd hh:mm:ss"),//图片修改时间，通过这个来判断是否是直接拍摄的照片 'fileName': event.target.name//照片名称 \},function(data, code)\{   $.hideLoading(); $.modal(\{ title: ' ', text: "上传成功！" \}); \},'json'); \} \} \}else\{ $.modal(\{ title: ' ', text: "请选择图片格式文件！" \}); \}\});

3.后台代码：

1.在Controller或者Action中调用，所需的参数file是上面post请求中所携带的dataURL，即base64字符串。FileUpload是自己写的一个Class，进行处理base64字符串

FileUpload upload = new FileUpload(file.split(",")[1]);
    JSONObject jsonObject = upload.uploadFlowFile();//savePath

2.在FileUpload中的方法，下面用到的fileFlow参数是上面new FileUpload时传进的参数

用到的是 sun.misc.BASE64Decoder包

/**
    	 * 方法名称：
    	 * 方法描述：上传文件
    	 * 创建时间：2015-9-29 下午1:39:03
    	 */
    	public JSONObject uploadFlowFile() throws Exception{
    		JSONObject json=new JSONObject();
    		try {
    			finishedFlowUpload("uploadPath");
    			json.put("msg", this.getSavePath());
    			json.put("fileName", this.getFiledataFileName());
    			json.put("savePath", this.getSavePath());
    			json.put("status", true);
    		} catch (Exception e) {
    			e.printStackTrace();
    			json.put("status", false);
    		} 
    		return json;
    	}

protected void finishedFlowUpload(String savePathKey) throws Exception {
        	// 根据服务器的文件保存地址和原文件名创建目录文件全路径
        	String dstPath = null; 
        	// 保存路径
        	String bsPath = null;
        	// 文件类型
        	String fileType = ".png";
        	String uuidName = null;
        	if(null!=savePathKey){
        		dstPath = ConfigUtil.get(savePathKey);//spring boot配置的保存路径
        	}  
        	if(null==dstPath||"".equals(dstPath)){
        		dstPath = ServletActionContext.getServletContext().getRealPath("/");
        	}
        	bsPath = "/" + DateUtil.dateToString(DateUtil.getNow(),DateUtil.SYS_DATE_FORMAT) + "/";
        	File f1 = new File(dstPath+bsPath);
        	if (!f1.exists()) {
        		f1.mkdirs();
        	}
        	
        	uuidName = UUID.randomUUID().toString();
        	bsPath = bsPath + uuidName + fileType;
        	dstPath = dstPath + bsPath;
        	File dstFile = new File(dstPath);
        	copyFlow(fileFlow, dstFile);
        	setSavePath(new ArrayList<String>());
        	this.getSavePath().add(bsPath);
    }

protected static void copyFlow(String fileInputStream, File dst) {
            OutputStream out = null;
            try {
                out = new BufferedOutputStream(new FileOutputStream(dst),
                        BUFFER_SIZE);
                BASE64Decoder base64Decoder = new BASE64Decoder();
                byte[] result = base64Decoder.decodeBuffer(fileInputStream);//解码
                for (int i = 0; i < result.length; ++i) {
    	            if (result[i] < 0) {// 调整异常数据
    	            	result[i] += 256;
    	            }
                }
                out.write(result);
                out.flush();
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                if (null != out) {
                    try {
                        out.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
        }

参考链接：

change方法来自：[https://blog.csdn.net/q814908133/article/details/51746901][https_blog.csdn.net_q814908133_article_details_51746901]

通过canvas解析成base64字符串来自：[http://www.php.cn/js-tutorial-388776.html][http_www.php.cn_js-tutorial-388776.html]

解析base64字符串链接：[https://blog.csdn.net/u013476542/article/details/53213783][https_blog.csdn.net_u013476542_article_details_53213783](此链接没有看，是项目中的代码，直接分享出来了，如果想了解可以看一下)

[https_blog.csdn.net_q814908133_article_details_51746901]: https://blog.csdn.net/q814908133/article/details/51746901
[http_www.php.cn_js-tutorial-388776.html]: http://www.php.cn/js-tutorial-388776.html
[https_blog.csdn.net_u013476542_article_details_53213783]: https://blog.csdn.net/u013476542/article/details/53213783