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; }
图片生成64位渲染到当前页面
最新推荐文章于 2022-08-19 10:39:20 发布