解決HTML頁面顯示本地圖片的問題(JAVA前後端程式碼)
阿新 • • 發佈:2018-12-21
這裡有個需求,我們需要在頁面上顯示一張本地的圖片。看似簡單的需求,卻並不簡單。
也許你百度一下會看到如下的答案:
但是可能你很快會發現,為什麼不管我怎麼嘗試都會不成功呢?
因為前提條件不對。
以上案例成功的前提是這樣的,你必須是一個靜態頁面才有可能對。簡單的說,如果你直接在本地機器上寫一個靜態的HTML檔案,將上面的HTML程式碼複製上去,就會成功。但是,如果你像我一樣,走了後端的請求,還用了模板引擎,這樣寫就不會成功了。(請求會變成ip:port/file:///D:1.jpg,這種請求顯然是訪問不到的)
那麼該怎麼辦呢?
這裡我提供一個思路,當然如果你有更好的辦法,歡迎留言,共同探討。
解決的思路是什麼呢?很簡單,src不僅可以支援檔案路徑,還可以支援BASE64碼,什麼是BASE64碼呢?
就像這樣的。
你可以嘗試著把一張圖片用上面的連結進行轉化,生成的BASE64填寫到src裡,這樣就可以顯示出圖片了。
顯然,我們需要在後端將圖片轉化成BASE64,那麼怎麼轉化呢?
import java.awt.image.BufferedImage; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; /** * 圖片與二進位制碼互轉工具類 * * @author New * */ public class ImageBinaryUtil { private static BASE64Encoder encoder = new sun.misc.BASE64Encoder(); private static BASE64Decoder decoder = new sun.misc.BASE64Decoder(); /** * 將圖片轉換成二進位制 * * @return */ public static String getImageBinary(String filePath) { File f = new File(filePath); BufferedImage bi; try { bi = ImageIO.read(f); ByteArrayOutputStream baos = new ByteArrayOutputStream(); ImageIO.write(bi, "jpg", baos); byte[] bytes = baos.toByteArray(); return encoder.encodeBuffer(bytes).trim(); } catch (IOException e) { e.printStackTrace(); } return null; } /** * 將二進位制轉換為圖片 * * @param base64String */ public static void base64StringToImage(String base64String, String filePath) { try { byte[] bytes1 = decoder.decodeBuffer(base64String); ByteArrayInputStream bais = new ByteArrayInputStream(bytes1); BufferedImage bi1 = ImageIO.read(bais); File w2 = new File(filePath);// 可以是jpg,png,gif格式 ImageIO.write(bi1, "jpg", w2);// 不管輸出什麼格式圖片,此處不需改動 } catch (IOException e) { e.printStackTrace(); } } }
用以上的工具類即可互轉。
呼叫getImageBinary()之後,獲得BASE64還需要加個頭:
這樣就可以了,最後生成的資料一定是要和上面的的連結轉化的BASE64一樣的。