１．【Jscriptで画像処理】について
Javaアプレットで以前作成した画像処理をcanvasとJavaScriptで
作ってみた。
画像をピクセル単位で移動させて、波紋状に変化させています。
（ソースはページのソース表示で確認出来る）
２．問題は、Ghromeでは正常に動作するが、IE11では動作しない。
ネットでいろいろ検索して試してみたがどうしても動作しないが
ふと再読み込みすると何故か正常に動作する。
現象の詳細は今後分析することにする。
３．IE対策として、ページ表示後にreloadをすることにしたが、これが
なかなか問題で、setTimeout等を使ってページ表示後にreloadしても
setTimeoutも初期化されてロードされるので、結果としてreloadを
繰り返してしまった。
正常動作した対策は
var reload=function(){
if(window.name !== 'abc'){
location.reload();
window.name='abc';
}
};
reload();
これでwindow.nameは一度設定するとセッション終了まで保持
されるようなので、reloadしても一度しか実行されないようになる。
ただし、一度表示されるとwindow.nameは保持されるため、ページを
移動後再表示すると、JavaScriptが動作しない表示に戻ってしまう。
対策として、ページ移動ボタンクリック時にwindow.nameをクリア
する対策を入れてみたが、ブラウザの戻るボタンで移動した場合
効果が無いため画面のunload時にクリアする対策を実施。
document.addEventListener("DOMContentLoaded",function(){
window.addEventListener("beforeunload",function(){
window.name='';
});
});
コンテンツのロード後に有効にしないと、reloadとunloadがトグル
で動作し画面がフラッシュして表示されない為、DOMContentLoadedで
ロード完了後に有効になるようにしている。
４．IEでリロードしないとIEで動作しない問題について、IEでは一度ロードすると
キャッシュされて、2回目からloadイベントが発生しないのが原因と判明。
HTML5.jpの情報を元にloadした画像のURLに時間情報を指定して強制的に
imgをloadする様に変更。
window.addEventListener("DOMContentLoaded",function(){
var canvas=document.getElementById('ripple');
if(!canvas || !canvas.getContext){
return false;
}
var context=canvas.getContext('2d');
img.src='image/rose.jpg?'+ new Date().getTime();
img.onload = function(){
//var canvas=document.getElementById('ripple');
//var context = canvas.getContext('2d');
w = img.width;
h = img.height;
canvas.width = w;
canvas.height = h;
context.drawImage(img,0,0);
var srcData = context.getImageData(0,0,w,h);
pt=h;
var dspripple=function(){
var dstData = context.createImageData(w,h);
var src = srcData.data;
var dst = dstData.data;
movImage(src,dst);
context.putImageData(dstData,0,0);
pt=pt-sp;
if(pt<=0) pt=h;
setTimeout(dspripple,100);
};
dspripple();
};
});
これによりIEで画面を終了せずにブラウザの閉じるで終了
した場合に、再読み込み出来なかった現象も解消される。
５．【画像処理】のパラメータテスト用画面を作成した最に
FormでのButtonクリック動作イベントがIEでは正常に動作したが、
Chromeではイベントが発生しない。
onclickをonClickに変更したら動作するようになった。
<input type="button" id="btn1" onClick="setlen();" value="57>
Chromeでは過去に問題があったとの報告があるが、現状何故なのかは
不明。
ただしここでサーバーにアップしてローカルでテストしたところ、インラインスクリプト
の実行エラーがChromeで発生した。
nonce属性を使用すれば良いようだが、面倒なので外部外部jsで実行する様に変更。
document.getElementById('btn1').addEventListener('click',function(){
setlen();
});
これで何とか動作するようになった。