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

小结图片操作的一些代码

项目开发中，时常与图片打交道，这里总结一些有用的操作图片的代码。

@author:ZJ 07-2-24

Blog: [url]http://zhangjunhd.blog.51cto.com/[/url]

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.html 中 name= 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 = ""http://blog.51cto.com/viewpic.php?refimg=" + 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=myIframe 的 iframe     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 >