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



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


  • administrators

    @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>


  • administrators

    @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


  • administrators

    @Google-Homer よかったです!


 

Recent Projects

  • @nak435 かしこまりました。よろしくお願いします。

    read more
  • @Yuki-Sato さん、

    外部の3.3vを使うとはいえ普通にvccやgndを供給して問題なくうごくのであれば、弊社での動作確認後Flick Hatのライブラリとして公開できればと思っているのですがいかがでしょう。

    今週末に確認しますので、お待ちください。

    read more
  • @nak435 時間がかかってすいません、

    なんとか3.3vをgndにつないでFlick Largeを動かしたかったのですが、うまく動かすことができなかったです。
    3.3vをgndを繋がずに接続するというのはライブラリで推奨して伝えることは難しいと思ってます。

    Flick LargeでなくFlick Hatの方で、外部の3.3vを使うとはいえ普通にvccやgndを供給して問題なくうごくのであれば、弊社での動作確認後Flick Hatのライブラリとして公開できればと思っているのですがいかがでしょう。

    よろしくお願い致します。

    read more
  • @nak435 ありがとうございます。
    接続は3.3vのgnd以外同じでした。
    エラーはそのせいかもしれませんが、しかし電気的にはgndを繋がない場合3.3vとしてうまく供給できないはずなのでそこが不思議です。

    教えていただいたプログラムの部分を修正して試してみたいと思います。
    また少し時間がかかりそうなのですが、早めに試したいと思います。

    引き続きよろしくお願い致します。

    read more