Chrome Packaged Apps, image編 2014-06-04

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

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

画像の表示で、
IMG要素-SRC属性に、画像ＵＲＬを指定すると。
セキュリティ関係のエラーが発生して、
表示できないようです。対策はありそうでした。
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();

view raw c0605-image-top-1.js hosted with ❤ by GitHub

===============================================

表示用の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');
	}

view raw c0605-image-top-2.js hosted with ❤ by GitHub

===============================================

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

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

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