用Ajax请求服务器的图片,并显示在浏览器中(转)

前言

一直在数据库里面存的都是图片在服务器的地址,然后再到浏览器中显示,但是发现两个问题

第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js,岂不是可以获取任何人电脑里面的文件了。

第二:图片存在的是在服务器的硬盘上面,而不是在客户的硬盘里面,所以也是取不到的

后来在网上找方法,找的方法,都是各种转换二进制到xml中,的各种高大上的答案,然后本人又实在太懒了,就自己想了一个方法,就是利用BufferedImage这个类。

开始

首先说说我的思路,就是把本地的图片,加载到内存中,然后放到BufferedImage这个缓冲流中,然后利用ImageIO.write(),这下大家都估计想得到一种思路了,但是如果说ajax,得到的数据,估计还是啥个乱七八糟的啥吧!没关系,稍后介绍。

工具类

首先建立一个加载图片的工类具,把一个图片的地址当参数存进去,得到这个图片的缓冲流:

/**
     * 根据图片的地址,返回图片的缓冲流
     * @param addr
     * @return
     */
    public static BufferedImage getInputStream(String addr){
        try {
            String imgPath = addr;
            BufferedImage image = ImageIO.read(new FileInputStream(imgPath));
            return image;
        } catch (Exception e) {
            e.printStackTrace();
            System.out.println();
            System.out.println("获取图片异常:java.awt.image.BufferedImage");
            System.out.println("请检查图片路径是否正确,或者该地址是否为一个图片");
        }
        return null;
    }

没错,就是使用ImageIO.read,来加载流对象,然后就是处理类的代码了,这是我用的是springMVC,springMVC这段时间比较火,所以我也好少用struts2了

处理类

/**
     * 根据图片的地址,来获取图片
     * @param addr
     * @param response
     */
    @ResponseBody
    @RequestMapping("/getImg")
    public void getImg(@Param("addr")String addr,HttpServletResponse response){
        BufferedImage img = new BufferedImage(300, 150, BufferedImage.TYPE_INT_RGB);
        img = ImgUtil.getInputStream(addr);
        if(img==null){
            throw new RuntimeException("打印图片异常:com.controller.Business_Ctrl.getImg(String, HttpServletResponse)");
        }
        if(img!=null){
            try {
                ImageIO.write(img, "JPEG", response.getOutputStream());
            } catch (IOException e) {
                e.printStackTrace();
                System.out.println("打印异常:com.controller.Business_Ctrl.getImg(String, HttpServletResponse)");
            }
        }
    }

很明显,使用ImageIO.read()读到图片时,就用ImageIO.write(),输出图片,输入流就是HttpServletResponse.getOutputStream()

客户端

            function setImg(addr){         
                $("#logo").attr("src","business/getImg?addr="+addr+"");
            }

如图所示,当需要加载图片的时候,就触发setImg方法,给它一个地址,当然,地址,早已经从后台传到前台了,自然,就算没有地址,稍微变一下,也可以在后台得到地址,然后返回,然后给img标签设置src属性,就可以得到图片了。

原文地址:https://www.cnblogs.com/123456p/p/8621381.html

时间: 2024-12-30 04:07:40

用Ajax请求服务器的图片,并显示在浏览器中(转)的相关文章

Android调用系统相册和相机选择图片并显示在imageview中

Android调用系统相册和相机选择图片并显示在imageview中,在系统调用相机拍摄中,直接返回的是经过压缩处理后的图像,当你直接把返还后的图片放在imageview中时 图片就会非常的模糊,所以要经过先存放在sd中,然后在处理并显示.当调用系统相册时,因为Android系统从4.4版本以后系统不再返回真实的uri路径,而是封装过后的uri路径,所以当你写代码时必须注意,4.4是一个分水岭,4.4以上的版本必须就通过解析和相应的处理才能获取到真实的uri路径. 先上程序运行的结果. 这个是调

提问!同一ajax请求获取的图片路劲,在谷歌浏览器能正确展示图片,在火狐浏览器则显示路径undefined

今天的工作学习之路遇见一个奇葩的问题,作为初级攻城狮的小生实在不知如何解决,都已经壁咚度娘一整天了,都未能解决问题,实属无奈,一开始认为是浏览器兼容的问题,但左看右看,也不是,也尝试过是不是页面加载与请求后没对应上,发现也不是,检查返回的结果,居然是undefined,可是在谷歌浏览器没有任何问题能正常展示图片,在火狐浏览器却是这样,来,看图说话: 首先此<img>标签为js动态拼接页面,因为获取的是会员等级,通过请求接口在另一个系统后台抓取图片路径,此拼接在循环中,每循环一次存入便存入数组中

ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践

写在前面 :从提出需求到完美的解决问题,实现过程是曲折的. 需求:在前(web client)后(Restful Service)端完全解耦的模式框架下,webclient需要请求 Service 返回的图片文件(二进制流),并在client端显示. 第一步思考:拿到此需求, 基于程序员的狂妄心里,思考到显示图片而已,jquery ajax直接get请求 将返回data 赋值给img标签的src属性即可嘛,so easy~ 不知天高地后的小子开始码代码,经过几分钟给出了以下的代码,并自信满满的准

根据url路径获取图片并显示到ListView中

项目开发中我们需要从网络获取图片显示到控件中,很多开源框架如Picasso可以实现图片下载和缓存功能.这里介绍的是一种简易的网络图片获取方式并把它显示到ListView中. 本案例实现的效果如下: 项目结构: 根据部分开源代码,我修改并封装了一个网络图片加载的工具类GetImageByUrl,通过调用其中的setImage方法,传入待显示图片的ImageView控件和该图片的url路径这两个参数即可实现获取网络图片的功能. GetImageByUrl.java package com.leo.i

MVC中根据后台绝对路径读取图片并显示在IMG中

数据库存取图片并在MVC3中显示在View中 根据路径读取图片: 1 byte[] img = System.IO.File.ReadAllBytes(@"d:\xxxx.jpg"); 简介:在有些情况下需要将图片转换为二进制流存放在数据库中,当显示时再从数据库中读出来显示在界面上. 本文简单介绍数据库中图片的存取方法,并在MVC3中显示在Razor视图中.仅供初学者参考学习. 1. 将图片转换为二进制流 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1

ajax请求后弹开新页面被浏览器拦截

window.open()我想应该很多人都不陌生吧,它可以实现除用a标签以外来实现打开新窗口! 最近开发项目用到时,却遇到了麻烦,本来好好的弹出窗口,结果被浏览器无情的给拦截了! 代码如下: $.getJSON(URL,data,function(data,state){ if(state=='success'){ window.open('http://www.cnblogs.com/garfieldzhong/'); }else{ alert('请求失败!'); } }) 这要手动允许弹出窗

巧用ajax请求服务器加载数据列表时提示loading

我们利用weui.js中的weui.loading为效果,ajax的beforeSend与complete方法,做一个加载数据时会有几秒的 loading... 要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是它的demo:   https://weui.io/weui.js/ 这里主要讲jQuery ajax的get,查询数据时,它的结构为: $.aja

在Android中如何获取视频的第一帧图片并显示在一个ImageView中

String path  = Environment.getExternalStorageDirectory().getPath(); MediaMetadataRetriever media = new MediaMetadataRetriever(); media.setDataSource(path+"/123.rmvb"); Bitmap bitmap = media.getFrameAtTime(); image = (ImageView)this.findViewById(

问卷过程_将编辑好的问卷(存储在数据库中)显示在浏览器中

首先要了解数据的设计,也就是数据室怎么存储在数据库中的. 先来看一个最简单的问卷的构成吧 可以看到大概的结构是:『标题:标题内容标题说明.题目:题目编号,题目内容.选项:选项类型,选项编号,选项内容』.提交:提交按钮.其中『』内的元素就是需要存储到数据库中的. 可以想一下:一张表示是否可以存储一张问卷呢?这应该是可以的但是一个表不应该只能存储一张问卷吧,要不然太浪费资源了. 数据库的设计应该是怎样的呢: 首先:整体的问卷基本信息要有:问卷的编号(我们通过链接把我们的问卷发给别人来填写的话,要唯一