4

さて、私はjavascriptで関数を持っています:

function store_data(){
var img=document.createElement("img"); 
/*var img=new Image();
img.onload = function() {
    context.drawImage(img, 0, 0);
};*/
img.src= URL; //js global var
var height=parseInt(img.naturalHeight,10);
var width=parseInt(img.naturalWidth,10);
var canvas = document.getElementById('myCanvas'); 
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);

var context = canvas.getContext('2d');
context.drawImage(img,0,0);
canvas.style.width="100%"; 
var data=(canvas.toDataURL("image/png"));
localStorage.setItem("data", data);

}

初めて呼び出されたときは、「data;」のような文字列を保存します。localStorage では、イメージは "data64;aothetahetahotetav..." のように不完全です。しかし、2回目に呼び出すと、データは正常に保存されます。なぜそれが起こるのですか？

おそらく、ロードされたdomのimgに画像をロードする必要がありますか？画像は後で描画するために保存されます。

4

2 に答える 2

3

マイケルがすでに述べたように、コードは完全にダウンロードされる前に画像のデータを localStorage に保存しています。2 回目は、イメージが既にキャッシュに存在します。

onload イベントが発生したときに、イメージをキャンバスにロードしてみてください。

function store_data() {

    var img = new Image();
    img.src =  URL; //js global var

    img.onload = function( ) {

        var canvas  =  document.getElementById( 'myCanvas' ); 
        canvas.setAttribute( "width", img.width );
        canvas.setAttribute( "height", img.height );

        var context  =  canvas.getContext( '2d' );
        context.drawImage( img, 0, 0 );
        canvas.style.width = "100%"; 
        var data = canvas.toDataURL("image/png");
        localStorage.setItem( "data", data );
    }

}
于 2013-01-28T22:12:13.523 に答える
0

でデータの保存を行わないimg.onloadと、イメージをローカル ストレージに保存するときに、イメージのデータが完全にダウンロードされたかどうかを確認できず、データの長さに一貫性がなくなります。

于 2013-01-28T22:03:14.987 に答える