웹 뷰어에 객체 필드의 이미지 표시

이번에는 로컬에 저장 등을 하지 않고 직접 웹 뷰어에 필드 데이터로 저장한 이미지를 표시하는 방법입니다.
동작 샘플로서는 이와 같이 표시됩니다.

통상, 화상 표시시킬 때의 img 태그의 기술은 이하와 같이 기입합니다만, 이번은 html 소스내에 직접 화상 데이터를 임베드 하는 표시 방법을 이용한 Tips입니다.

파일 이름으로 이미지 표시.html

  <img src="xxxx.jpg">

직접 이미지 데이터를 삽입할 때의 설명은 다음과 같이 합니다. (jpeg 이미지의 경우)

인라인 데이터로 이미지 표시.html

 <img src="data:image/jpeg;base64,[base64にエンコードした画像のｺｰﾄﾞ]">

jpeg 이외의 경우는 "image/jpeg"부분을 다음과 같이 mime 타입하고 있습니다.
gif의 경우 "image/gif"
png의 경우 "image/png"

웹 뷰어 설정

이번에는 웹 뷰어 설정과 관련된 부분만 설명합니다.

이미지만 표시하는 경우

이 경우 img 태그는 사용하지 않고 "data:image/jpeg;base64"로 시작하는 설명만을 웹 뷰어의 웹 주소란에 다음과 같이 기술합니다.

  "data:image/jpeg;base64," & Base64Encode (テーブルA::obj)

위의 예에서 테이블 A의 obj라는 필드 데이터가 표시됩니다.
요점은 필드 데이터를 Base64Encode 함수로 인코딩하는 것입니다. 이 함수는 FileMaker13에서 추가되었으므로 이전 버전에서 구현하려는 경우 별도의 Base64 관련 사용자 지정 함수를 찾아야합니다.

html 문서로 표시할 경우

이 경우 img 태그의 src 속성으로 인코딩 된 데이터를 웹 뷰어의 웹 주소 필드에 다음과 같이 설명합니다.

"data:text/html," &
List (
    "<!DOCTYPE html><body>";
    "<p>オブジェクトをWEBビューアにインラインで直接表示させる</p>";
    "<img src='data:image/jpeg;base64," & Base64Encode (テーブルA::obj) & "' width='300'>";
    "</body></html>"
)

주의점

이 방법을 사용하면 html의 소스 양이 인코딩 데이터만큼 증가합니다.
그 때문에 1개의 Web 뷰어에 복수 화상을 임베드하는 경우나, 큰 화상을 표시하는 경우 등은 주의가 필요할까 생각합니다. (큰 화상은 인코딩 데이터량도 많기 때문에)

설명은 이상입니다.
이번 샘플은 이하의 장소에 두었으므로, 자세한 것은 파일을 참조해 주세요.
샘플 파일

Reference

이 문제에 관하여(웹 뷰어에 객체 필드의 이미지 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hajisan/items/cdcad82a36465900cef7

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다