0

画像をbase64文字列にエンコードしてlocalStorageに保存する関数があります。localStorage から画像を取得し、それを使用して jQuery で背景画像を設定しようとしています。

すべて正常に動作していますが、画像が表示されません。ブラウザで要素を調べると、'data' URI を囲む一重引用符が挿入されていません。これが問題かどうかはわかりません。

これが私のコードです

画像をエンコードして保存する関数:

var img = document.getElementById("elephant");

function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to
    // guess the original format, but be aware the using "image/jpg"
    // will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");
console.log(dataURL);

    return dataURL;     
}

画像を設定するjQuery：

localStorage.setItem("background" , getBase64Image(img));
console.log(localStorage);

background = localStorage.getItem("background")

console.log(background);

$("#elephant2").css('background-image' , 'url(' +background+ ')');
4

1 に答える 1

0

この問題は引用符が欠落していると思っていましたが、実際には base64 データ文字列が破損しているか不完全でした。関数を window.onload = function () 内に配置したため、画像は文字列に変換する前に完全に読み込まれ、チャームのように機能します/

于 2013-11-11T23:19:07.050 に答える