obnizのフォーラムは新しいシステムに移行しております。

新しいフォーラムはこちらになります

画像ファイルをdisplayする方法を教えて下さい



  • obniz.display.xxで画像を表示する方法を教えて下さい。



  • @Google-Homer ここのサンプルが似たようなことを行っております。

    https://obniz.io/explore/24

    具体的にはobnizのディスプレイサイズと同じく128*64のcanvasというのをHTMLの中に用意していただき、

    <canvas id="canvas" width=128 height=64 style="-webkit-font-smoothing:none"></canvas>
    

    そこに画像を描画します。
    canvasへの画像の描画方法はこちらが参考になります。
    http://www.html5.jp/canvas/ref/method/drawImage.html

    またはこちら

    https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

    そして、そのcanvasのデータをobniz.display.drawに入れることで描画が可能です。

    let ctx = $("#canvas")[0].getContext('2d');
    obniz.display.draw(ctx)
    

    canvasは画像だけじゃなく、直線や円なども描画できますし。3Dなども出せます。

    https://obniz.io/explore/18

    こちらは3Dの例です。



  • 上記参考に下記のように書いたのですが、obnizの画面で「OK」が表示された後に真っ黒になります。HTML画面にはcanvasOutputにイメージ画像が表示されています。どこがまずいでしょうか?

    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@1.15.2/obniz.js" crossorigin="anonymous"></script>
    </head>

    <body>
    <div id="obniz-debug"></div>
    <div>
    <td>
    <canvas id="canvasOutput" width=128 height=64 style="-webkit-font-smoothing:none"></canvas>
    </td>
    </div>
    <script>
    var obniz = new Obniz("XXX-XXXX");

    obniz.onconnect = async function () {
    obniz.resetOnDisconnect(false);
    var canvasOutput = document.getElementById('canvasOutput');
    var canvasContext = canvasOutput.getContext('2d');

    var img = new Image();
    img.src = "https://docs.google.com/uc?id=1-9PdB7e285Uk3ek4DQ4P1mk5U5urcoJF";
    img.onload = function() {
    canvasContext.drawImage(img, 0, 0);
    }

    var ctx = $("#canvasOutput")[0].getContext('2d');
    obniz.display.clear();obniz.display.print('OK');
    obniz.display.draw(ctx)
    }

    </script>
    </body>
    </html>



  • @Google-Homer そのコードですと、画像のロードが終わる前に画像が書かれていないcanvasをobnizに送ろうとしています。画像のロードが終わってcanvasContext.drawImage()を行ったあとにobnizに対して送る必要があります。

    img.onload = function() {
    canvasContext.drawImage(img, 0, 0);
    var ctx = $("#canvasOutput")[0].getContext('2d');
    obniz.display.clear();obniz.display.print('OK');
    obniz.display.draw(ctx)
    }
    }
    

    また、いざ描画しようとしたところでエラーになるかと思いますが、
    これはブラウザのセキュリティ的な理由で、「違うドメインの画像は描画はできても値の取得ができない」からです。
    回避するにはobnizのリポジトリ内に画像を保存するか(そうすれば同じドメインになります)または、画像をbase64という生データにしてプログラムの中に入れてしまう方法です。

    後者の場合は
    https://www.base64-image.de
    などのサイトで画像をbase64に変換して、urlの代わりに利用します

    img.src = "data:image/gif;base64,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";
    

    これでディスプレイ上に画像が出るかと思います。

    ただ、obnizのディスプレイは濃淡のないモノクロディスプレイなので、しきい値(どの明るさで白にするか)を設定しないとうまく画像が表示されません。

    https://tech-blog.s-yoshiki.com/2018/09/448/
    を参考にcanvasの段階で2値化するとうまく描画できると思います。



  • 無事表示できました。imgはzリポジトリにアップロードしました。
    ありがとうございました。

    0_1548398987705_WIN_20190125_15_48_09_Pro.jpg



  • @Google-Homer よかったです!



SUGGESTED TOPICS