Jsp/Servlet:小结图片操作的一些代码-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

Jsp/Servlet:小结图片操作的一些代码

简介:
1.利用servlet在网页上显示本地图片

示例:将本地硬盘d:\temp\1.gif显示在1.html页面上的指定位置。

Showimage.java

package com.zj.sample;

 

import java.io.FileInputStream;

import java.io.IOException;

import java.io.OutputStream;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

@SuppressWarnings("serial")

public class Showimage extends HttpServlet {

    public void doGet(HttpServletRequest req, HttpServletResponse res)

           throws ServletException, IOException {

       try {

           FileInputStream hFile = new FileInputStream("d:\\temp\\1.gif");// byte流的方式打开文件d:\1.gif

           int i = hFile.available(); // 得到文件大小

           byte data[] = new byte[i];

           hFile.read(data); // 读数据

           hFile.close();

           res.setContentType("image/*"); // 设置返回的文件类型

           OutputStream toClient = res.getOutputStream(); // 得到向客户端输出二进制数据的对象

           toClient.write(data); // 输出数据

           toClient.close();

       catch (IOException e) {// 错误处理

           PrintWriter toClient = res.getWriter(); // 得到向客户端输出文本的对象

           res.setContentType("text/html;charset=gb2312");

           toClient.write("无法打开图片!");

           toClient.close();

       }

    }

}
 
1.html

在想要显示图片的位置加入此语句:

<img src="showimage">
 
web.xml(注册此servlet
<servlet>

    <servlet-name>Showimg</servlet-name>

    <servlet-class>com.zj.sample.Showimage</servlet-class>

</servlet>

<servlet-mapping>

    <servlet-name>Showimg</servlet-name>

    <url-pattern>/showimage</url-pattern>//对应<img src="showimage">

</servlet-mapping>

2.利用JavaScript显示给定网址的图片

javascript

<script>

function change(){

  var str=msgContentImsPicUrl.value;

   document.write('<img src="'+str+'">'); //对应2.htmlname= msgContentImsPicUrl的文本框

}

</script>
 
2.html

<INPUT type=button size=60 value="OK" name=picSubmitUrl

    onclick="change()">

<br>

<input type=text name=msgContentImsPicUrl>
3利用JavaScript实现点击当前图片转换为另一张图片

3.html

(删除"http://blog.51cto.com/viewpic.php?refimg=" +
<img src="http://www.baidu.com/img/logo.gif"

    onclick="this.src='http://www.google.cn/intl/zh-CN/images/logo_cn.gif'"

    title="点我">

<br>

4.利用JavaScript实现在当前页面显示给定址的图片(网页)

show.js

function pic() {

    var myIframe = document.getElementById("myIframe");//对应4.jsp中的id=myIframeiframe

    var aim = url.value; //对应4.jsp中的name=url的文本框

    myIframe.src = aim;

}
 
4.jsp

<html>

<script src="show.js" type="text/javascript"></script>

<body>

    <INPUT maxLength=200 size=30 value=http: // name=url>

    <input type="button" name="Submit" value="ok" onclick="pic()" />

    <br>

    <iframe frameborder="0" style="height: 200px; width: 200px;" src=""

       id="myIframe"></iframe>

</body>

</html>
 

本文转自zhangjunhd51CTO博客,原文链接:http://blog.51cto.com/zhangjunhd/18385,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章