obnizのフォーラムは新しいシステムに移行しております。
新しいフォーラムはこちらになります画像ファイルをdisplayする方法を教えて下さい
-
obniz.display.xxで画像を表示する方法を教えて下さい。
-
@Google-Homer ここのサンプルが似たようなことを行っております。
具体的には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なども出せます。
こちらは３Dの例です。
-
上記参考に下記のように書いたのですが、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リポジトリにアップロードしました。
ありがとうございました。
-
@Google-Homer よかったです！
