RQI Web Decoder SDK デモ

独自要素を使い、.rqiファイルをブラウザー内で直接表示します。

RQIを待っています…

Server-hosted RQI

src is a URL on the web server. It cannot point directly to an arbitrary file on the visitor's PC.

<script type="module" src="./sdk/rqi-image.js"></script>
<rqi-image src="./sample.rqi" alt="RQI image" fit="contain"></rqi-image>

Local RQI selected by the user

<input id="rqiFile" type="file" accept=".rqi">
<rqi-image id="rqiViewer" fit="contain"></rqi-image>
<script type="module">
  import "./sdk/rqi-image.js";
  const input = document.querySelector("#rqiFile");
  const viewer = document.querySelector("#rqiViewer");
  input.addEventListener("change", async () => {
    if (input.files[0]) await viewer.loadFile(input.files[0]);
  });
</script>