图片生成64位渲染到当前页面

td style="width:50%;">
									<span style="color:red;">*</span>场景主图(建议对比尺寸4:3)：
									<input type="hidden" name="hsceneImg" id="hsceneImg" value="str">
									<input type="hidden" name="hsceneImgNm" id="hsceneImgNm" value="0" >
									<input type="file"  name="sceneImg" id="sceneImg">
								</td>
								<td>									
								<img id="sceneThemeImg" width="100px" height="100px" >

前台

js1:
/**
* 获得base64
* @param {Object} obj
* @param {Number} [obj.width] 图片需要压缩的宽度，高度会跟随调整
* @param {Number} [obj.quality=0.8] 压缩质量，不压缩为1
* @param {Function} [obj.before(this, blob, file)] 处理前函数,this指向的是input:file
* @param {Function} obj.success(obj) 处理后函数
* @example
*
*/
$.fn.compressImage = function(obj) {

var globalObj = this;

this.on('change', function() {
var file = this.files[0];
var URL = window.URL || window.webkitURL;
var blob = URL.createObjectURL(file);

// 执行前函数
if ($.isFunction(obj.before)) {
obj.before(this, blob, file)
};

_create(blob, file);
//this.value = ''; // 清空临时数据
});

/**
* 生成base64
* @param blob 通过file获得的二进制
*/
function _create(blob) {
var img = new Image();
img.src = blob;

img.onload = function() {
var that = this;

//生成比例
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = w / scale;

//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
$(canvas).attr({
width: w,
height: h
});
ctx.drawImage(that, 0, 0, w, h);

/**
* 生成base64
* 兼容修复移动设备需要引入mobileBUGFix.js
*/
var base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);

// 修复IOS
if (navigator.userAgent.match(/iphone/i)) {
var mpImg = new MegaPixImage(img);
mpImg.render(canvas, {
maxWidth: w,
maxHeight: h,
quality: obj.quality || 0.8
});
base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);
}

// 修复android
if (navigator.userAgent.match(/Android/i)) {
var encoder = new JPEGEncoder();
base64 = encoder.encode(ctx.getImageData(0, 0, w, h), obj.quality * 100 || 80);
}

// 生成结果
var result = {
base64: base64,
clearBase64: base64.substr(base64.indexOf(',') + 1),
obj:globalObj
};

// 执行后函数
obj.success(result);
};
}
};


// 例子
/*
$('input:file').compressImage({
width: 100,
quality: 0.1,
//before: function (that, blob) {},
success: function (result) {
console.log(result);

//页面生成base64编码的图片
var img = new Image();
img.src = result.base64;
$('body').append(img);

//获取图片base64编码
var base64Text = result.clearBase64;


}
});
*/

js2:
//图片处理
jQuery.fn.extend({
uploadPreview: function (opts) {
var _self = this,
_this = $(this);
opts = jQuery.extend({
Img: "ImgPr",
Width: 100,
Height: 100,
ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
Callback: function () {}
}, opts || {});
_self.getObjectURL = function (file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
};
_this.change(function () {
if (this.value) {
if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
wechatAlert({
mask:true,
content:"选择文件错误,图片类型必须是" + opts.ImgType.join('，') + "中的一种！"
});
this.value = "";
return false
}

var maxsize = 10*1024*1024; //10M
if (this.files[0].size > maxsize) {
wechatAlert({
mask:true,
content:"上传的图片文件不能超过10M！"
});
this.value = "";
return false
}

if ($.browser.msie) {
try {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
} catch (e) {
var src = "";
var obj = $("#" + opts.Img);
var div = obj.parent("div")[0];
_self.select();
if (top != self) {
window.parent.document.body.focus()
} else {
_self.blur()
}
src = document.selection.createRange().text;
document.selection.empty();
obj.hide();
obj.parent("div").css({
'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
'width': opts.Width + 'px',
'height': opts.Height + 'px'
});
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
}
} else {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
}
opts.Callback()
}
})
}
});

//商圈范围选择
$(document).ready(function(){
//渲染图片
$("#sceneImg").compressImage({
quality: 1,
success: function (result) {
$("#hsceneImg").val(result.clearBase64);
$("#hsceneImgNm").val(1);//修改标识
}
});
//多个js加入的图片渲染
$("#posterImg").uploadPreview({ Img: "sposterImg", Width: 100, Height: 100 });
var demandListSize = i; //需求
for(var n=0;n<demandListSize;n++){
var hNmimage = "#hNmimage"+(n+1);
var himage = "#himage"+(n+1);
var images = "#image"+(n+1);
//图片Base64编码
$(images).compressImage({
quality: 1,
success: function (result) {
var hNmimg = "#hNm" + $(result.obj).attr("id");
var hddimg = "#h" + $(result.obj).attr("id");
$(hddimg).val(result.clearBase64);
$(hNmimg).attr('value',1);
}
});
}
})；

后台
method1:
	Map<String, Object> rtnval = new HashMap<>();
            try {
                rtnval = getServerImageInfo(hsceneImg);
            } catch (Exception e) {
                log.error("error",e);
                modelMap.put("errorMsg", "获取上传压缩图片失败");
                return "/errorpage/error";
            }
            params.put("hsceneImg",(String)rtnval.get("finalPath")+(String)rtnval.get("finalName"));

method2:

 //获取fastdfs服务器上图片信息
    private Map<String, Object> getServerImageInfo(String base64Image) throws Exception{

        Map<String, Object> rtnval = new HashMap<String, Object>();
        try {
            //Base64解码工具类
            BASE64Decoder decoder = new BASE64Decoder();

            // Base64解码
            byte[] buf = decoder.decodeBuffer(base64Image);

            //文件名：IMG_时间戳
            String imageName = "IMAGE_" + String.valueOf(Calendar.getInstance().getTime().getTime()) + ".png";

            //获取图片输入流
            InputStream imageIS = new ByteArrayInputStream(buf);

            //获取图片大小
            long imageSize = imageIS.available();

            //获得文件所在服务器相对路径
            String img_url = FastdfsUtil.getInstance(PropertiesUtil.getValue("fastdfsServerAddress")).uploadFile(imageIS, imageName, imageSize);

            //关闭文件流
            imageIS.close();

            //最后一个斜杠"/"的索引
            int pos = img_url.lastIndexOf("/")+1;

            String img_url_path = img_url.substring(0, pos);
            String img_url_name = img_url.substring(pos, img_url.length());

            rtnval.put("finalPath", img_url_path);
            rtnval.put("finalName", img_url_name);
            rtnval.put("imgName", imageName);

        } catch (Exception e) {
            log.info(e.getMessage());
            throw e;
        }

        return rtnval;
    }