head

2014年6月4日水曜日

Chrome Packaged Apps, image編  2014-06-04


Chrome Packaged Appsのimage(画像)などについて。メモです
(Packagedインストール及びデバック方法は省略させて頂きます。)

参考サイト様(公式かも):
https://developer.chrome.com/apps/about_apps

画像の表示で、
IMG要素-SRC属性に、画像URLを指定すると。
セキュリティ関係のエラーが発生して、
表示できないようです。対策はありそうでした。
xhr(XMLHttpRequest) を使用すると、表示可能のようです。
*) 検索するとサンプルなどに、含まれてました。

ソースこちら、 https://github.com/kuc-arc-f/chrome_image
(jQuery使ってます。)

画像の取得処理。
*)どちらかというと、単純なDOM構築でなく。
通信処理後、バイナリをオブジェクトに渡す
みたいな処理ぽいです。

https://github.com/kuc-arc-f/chrome_image/blob/master/js/controller.js
===============================================
var xhr = new XMLHttpRequest();
xhr.open('GET', imageUrl);
xhr.responseType = 'blob';
xhr.onload = function() {
var img = document.createElement('img');
img.setAttribute('data-src', imageUrl);
img.setAttribute('id', s_id);
img.className = 'icon';
var objURL = this._createObjectURL(xhr.response);
img.setAttribute('src', objURL);
element.appendChild(img);
return img;
}.bind(this);
xhr.send();
===============================================

表示用のDIVタグ配置します。
https://github.com/kuc-arc-f/chrome_image/blob/master/sub.html
===============================================
<div id="id-div-img"  ></div><br />
<div id="id-div-img2" ></div><br />
<div id="id-div-img3" ></div>
===============================================

サブ画面を開くと、
起動時に、外部クラウドから画像ダウンロードして
描画しています。
https://github.com/kuc-arc-f/chrome_image/blob/master/sub.js
*) 画像は、Github-page に、適当に事前に配置しておきます。

===============================================
AppShow.prototype.proc_init = function() {
console.log('#proc_init');
var s1='http://kuc-arc-f.github.io/h5_t0604_page/img/p1.png';
var s2='http://kuc-arc-f.github.io/h5_t0604_page/img/p2.JPG';
var s3='http://kuc-arc-f.github.io/h5_t0604_page/img/p3.JPG';
var ctl = new Controller();
var divcont = document.querySelector('div#id-div-img');
var img_t= ctl._requestRemoteImageAddElem( s1, divcont ,'id_img1');
var divcont2 = document.querySelector('div#id-div-img2');
var img_t= ctl._requestRemoteImageAddElem( s2, divcont2 ,'id_img1');
var divcont3 = document.querySelector('div#id-div-img3');
var img_t= ctl._requestRemoteImageAddElem( s3, divcont3 ,'id_img1');
}
===============================================

サブ画面に表示しました。

まとめ(Chrome Packaged Apps 開発メモ)こちら、
http://knaka0209.blogspot.jp/2014/06/chrome-pkg.html

*)
[update: 2014/06/05] Gistにコード一部貼付け修正しました。


0 件のコメント:

コメントを投稿

google colaboratory お試し編 、GPUも使える機械学習の環境構築

前回続き、機械学習の関連となります。 開発環境まわりの内容となり。先人様の情報を元に調査しました。 google colab(google colaboratory) を試してみました。機械学習系の いくつかのライブラリがインストール済みで、 クラウド上で、ある程度機械学...

AD-parts

Shop
Bluetooth搭載
ベース基板

Social