前回の記事はこちら↓
画像表示のためのメソッド作成
data.append(“data:～”);と書いておくと、HTMLでは値を受け取るだけで表示ができます。
Requestメソッド内では、下記photoViewメソッドを使用して、modelで値を受け渡してHTML表示させます。
public String photoView(String employeePhoto) {
// 画像を検索してbyteとしてViewへ受け渡す
String uploadPath = "src/main/resources/static/upload/" + employeePhoto;
// 画像データストリームを取得する
try (FileInputStream fis = new FileInputStream(uploadPath);) {
StringBuffer data = new StringBuffer();
ByteArrayOutputStream os = new ByteArrayOutputStream();
byte[] buffer = new byte[1024];
// バイト配列に変換
while (true) {
int len = fis.read(buffer);
if (len < 0) {
break;
}
os.write(buffer, 0, len);
}
// 画像データをbaseにエンコード
String base64 = new String(
org.apache.tomcat.util.codec.binary.Base64.encodeBase64(os.toByteArray()),"ASCII");
// 画像タイプはJPEG
// Viewへの受け渡し。append("data:~~)としているとtymleafでの表示が楽になる
data.append("data:image/jpeg;base64,");
data.append(base64);
return data.toString();
} catch (Exception e) { e.printStackTrace();
return null;
}
}
// 画像をViewに渡す
@RequestMapping("/top")
public String top(@AuthenticationPrincipal LoginAccount account, Model model) {
// employeNumberを利用してemployee nameを検索。そしてviewへ受け渡す
EmployeeEntity user = repository.findByEmployeeNumber(account.getUsername());
model.addAttribute("userName", user.getEmployeeName());
// 写真データを受け渡し
model.addAttribute("userPhoto", photoView(user.getEmployeePhoto()));
return "top";
}
<code>
以上が、遠回りな画像表示でした…
