前段时间在公司开发了轮播模块,有很多值得记录的知识点。在此记录一下。 长话短说。开发时,浏览器直接访问本地图片(即直接在img标签上贴 src ="D:/××")时,会报错
Not allowed to load local resource: (原因就是浏览器处于安全考虑,禁止了直接访问),解决方法网上给出两种,一种是配置虚拟路径,另一种就是转成二进制数据读取。
所以我将图片转码,之后再在img标签中显示。
然后,我们项目前端用的是 jQuery ,jQuery直接处理 blob 数据是有点困难的,因为会将二进制数据转成 String。所以可以写一个js的处理方法,在前台调用。上代码
/** * 公用方法,jQuery处理图片流,用js写 * @param url 数据流地址 * @param args 图片路径 {src : D:\**\**.jpg} 注意键值对 * @param success 成功之后的回调 */ function getBinary(url, args, success) { var xmlhttp = new XMLHttpRequest(); var data = eval(args); var i = 0; for (var key in data) { if (i++ === 0) { url += '?' + key + "=" + data[key]; } else { url += '&' + key + "=" + data[key]; } } xmlhttp.open("GET", url, true); xmlhttp.responseType = "blob"; xmlhttp.onload = function () { success(this.response); }; xmlhttp.send(); } jQuery调用: function readImg() { getBinary("/homeRotation/IoReadImage", {'src': $("#src").val()}, function (data) { var img = $('#demo1'); console.log(img); window.URL.revokeObjectURL(img.src); $('#demo1').attr('src', window.URL.createObjectURL(data)); }); } readImg();
附上后台service代码
/** * 二进制流 读取本地文件(修改时用) * @param request * @param response */ @Override public void IoReadImage(HttpServletRequest request, HttpServletResponse response) { ServletOutputStream out = null ; FileInputStream ips = null; String src = request.getParameter("src"); if (src == null){ src = "e:/2021/12/09\\6af250840cf14217ab268136efd70d16.jpg"; } try { ips = new FileInputStream(new File(src)); response.setContentType("image/png"); out = response.getOutputStream(); // 读取文件流 int len = 0; byte[] buffer = new byte[1024 * 10]; while ((len = ips.read(buffer)) != -1){ out.write(buffer,0,len); } out.flush(); } catch (Exception e) { e.printStackTrace(); }finally { if (out != null && ips != null){ try { out.close(); } catch (IOException e) { e.printStackTrace(); } try { ips.close(); } catch (IOException e) { e.printStackTrace(); } } } }
主要方法 getBinary ,走一遍就了解了