上传图片并裁剪（cropper）,ajax上传base64（裁剪后的图片）

本次采用的是cropper裁剪

一、需引入文件

此处需注意的是，必须先引入jquery.min.js，再引入cropper.js,否则会出现错误.cropper()函数未定义，我猜想cropper.js是基于jquery写的

二、元素

<!-- 调用选择图片，并将图片的值传到后台 -->
<input type="file" style="display: none;"
    id="PRODUCT_PIC" name="PRODUCT_PIC" value="" onchange="selectImage(this)">
<!-- 图片点击与显示 -->
<div style="width:500px;height: 800px;display:inline;" id="cropper1">
    <img onclick="selectclick()" src="<%=touxiang%>/${DATE}/${pd.PRODUCT_PIC}" style="height: 800px; width: 500px; cursor: pointer;"
	id="img"/>
</div>
<!-- 图片裁剪 -->
<div style="width:500px;height: 800px; display: none" id="cropper2">
    <img src="" style="height: 800px; width: 500px; cursor: pointer;" id="cropper"/>
    <button id="image_save" >保存</button>
</div>

三、js代码

//点击图片，调用input上传图片的功能
function selectclick() {
    document.getElementById("PRODUCT_PIC").click();
}
//上传图片
function selectImage(file) {
    debugger;
    if (!file.files || !file.files[0]) {
        return;
    }
    var reader = new FileReader();
    //上传图片成功的回调
    reader.onload = function(evt) {
	$('#cropper1').hide();
	$('#cropper2').show();
	//调用cropper.js中的方法出现裁剪区，evt.target.result是的到的图片的src,传入下面的函数中
	$('#cropper').cropper('reset', true).cropper('replace', evt.target.result);
	}
    reader.readAsDataURL(file.files[0]);//将信息存入input
}
//裁剪区格式的设定
$('#cropper').cropper({
    viewMode: 1,
    aspectRatio: 1, //裁剪比例，NaN-自由选择区域
    autoCropArea: 0.9, //初始裁剪区域占图片比例
    aspectRatio: 500 / 800,
    resizable:false,//不允许改变裁剪框大小
    dragCrop:false,//不允许重开裁剪框
    // movable:false,//不允许移动裁剪框
    crop: function(data) { //裁剪操作回调
    }
});
//图片显示
$('#image_save').click(function(e) {
	        	debugger;
	            e.preventDefault();//阻止整个页面的表单提交
	            var canVas = $('#cropper').cropper("getCroppedCanvas", {});
	            //将裁剪的图片加载到face_image
	            $('#img').attr('src', canVas.toDataURL());
	            //去除base64的data:image/png;base64,
	            eImgBase64 = canVas.toDataURL().substring(22);
	            $.ajax({
					type: "POST",
					url: '<%=basePath%>/product/cropper.do',
					data: {touxiang:eImgBase64},
					success: function(data){
						$("#Form").append("<input type='hidden' name='pic0' value='"+data+"'/>");
					}
				}); 
	
	            $('#cropper2').hide();
				$('#cropper1').show();
	        });

需要注意的是：

1、canVas.toDataURL()的到的是base64的字符串（格式：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALYAAAEjCAYAAACfLPtAAAAgAElEQVR4Xny9WZBl13Ultu785nw5j5U1zxMKqAKKBAoEQIiTSFGkqOi25T9/2P6yI+SOkNTqcITD/nHbH/7oD0tid....），如果是在前端展示，直接将其赋值给'src',如果传送给controller去处理，必须把data:image/png;base64,上传方式必须用post

2、有可能会出现http post request header is too large问题，部署时需要修改server.xml

3、<%=basePath%>代表项目路径

三、controller层的代码

'<%=basePath%>product/cropper.do'方法的作用是，将接收base64图片，将其存入本地，返回ajax一个图片地址，

        /**图片裁剪存储
	 * @param touxiang
	 * @throws Exception
	 */
	@RequestMapping(value="/cropper")
	@ResponseBody
	public String cropper() throws Exception{		
		PageData pd = this.getPageData();// 获取post+get的参数
		String touxiang ="";
		try{
			//必传参数的非空判断
			if (null != pd.getString("touxiang") && !"".equals(pd.getString("touxiang"))) {	
				//存储头像的名称
				touxiang = this.get32UUID()+".png";
				//对字节数组字符串进行Base64解码并生成图片
				String a = pd.getString("touxiang");//传入的base64
				boolean generateImage = ImageAnd64Binary.generateImage(a, Image.getBASICPATH()+Image.getPATHPIC() + "/" + touxiang);
				System.out.println(Image.getImageTou1()+touxiang);
			} 
		}catch(Exception e){
			logger.info("图片裁剪异常：" + e.getMessage());
			
		}
		logAfter(logger, "图片裁剪结束");
		return

Image.getBASICPATH()+Image.getPATHPIC() + "/" + touxiang;

}

generateImage方法：对字节数组字符串进行Base64解码并生成图片

该方法的第一个参数是base64字符串，第二个是存入的路径

  /**
     * 对字节数组字符串进行Base64解码并生成图片
     * @param imgStr            转换为图片的字符串
     * @param imgCreatePath     将64编码生成图片的路径
     * @return
     */
    public static boolean generateImage(String imgStr, String imgCreatePath){
        if (imgStr == null) //图像数据为空
            return false;
        BASE64Decoder decoder = new BASE64Decoder();
        try {
            //Base64解码
            byte[] b = decoder.decodeBuffer(imgStr);
            for(int i=0;i<b.length;++i) {
                if(b[i]<0) {//调整异常数据
                    b[i]+=256;
                }
            }
            OutputStream out = new FileOutputStream(imgCreatePath);    
            out.write(b);
            out.flush();
            out.close();
            return true;
        } catch (Exception e){
            return false;
        }
    }

上传图片并裁剪（cropper）,ajax上传base64（裁剪后的图片）

猜你喜欢