小結圖片操作的一些程式碼
專案開發中，時常與圖片打交道，這裡總結一些有用的操作圖片的程式碼。
@author:ZJ 07-2-24
1．利用servlet在網頁上顯示本地圖片
示例：將本地硬碟d: emp1.gif顯示在1.html頁面上的指定位置。
Showp_w_picpath.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 Showp_w_picpath 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(“p_w_picpath/*”); // 設定返回的檔案型別
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=“showp_w_picpath”>
|
web.xml（註冊此servlet）
|
<servlet>
<servlet-name>Showimg</servlet-name>
<servlet-class>com.zj.sample.Showp_w_picpath</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Showimg</servlet-name>
<url-pattern>/showp_w_picpath</url-pattern>//對應<img
src=”showp_w_picpath”> </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
（刪除“https://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/p_w_picpaths/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>
|