將URL從URL存儲到localstorage

Question

我有一個JSON字符串，如下所示，它包含圖像的路徑。在服務器

"send-sms":{ 
    "menu_name":"Send", 
    "menu_icon":"http:\/\/example.com\/mob\/media\/com_abcd\/icons\/send.png" 
} 

圖像存在這是我的元

<meta http-equiv="Content-Security-Policy" 
     content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data: http://example.com"> 

我想將圖像存儲到本地會話。我使用下面的Javascipt來傳遞完整圖片的URL。它總是返回null。

function getImageData(imgpath){ 
    var img = new Image(); 
    img.src = imgpath; 
    var data = null; 

    img.load = function() { 
     var canvas = document.createElement('canvas'); 
     document.body.appendChild(canvas); 
     var context = canvas.getContext('2d'); 
     context.drawImage(img, 0, 0); 
     data = context.getImageData(x, y, img.width, img.height).data; 
     console.log(data); 
     localStorage.setItem('mysession_imag', data); 
    }; 

} 

Answer 1

請記住，您有一個async調用。

該代碼將在我在評論中提到的步驟中運行。

總之，您正在創建第二個變量，也稱爲data，然後無所作爲。

function getImageData(imgpath){ 
    var img = new Image(); 
    img.src = imgpath; 

    // Step 1: Yes, data is `null`. You are setting it that way. 
    data = null; 

    img.load = function() { 
     var canvas = document.createElement('canvas'); 
     document.body.appendChild(canvas); 
     var context = canvas.getContext('2d'); 
     context.drawImage(img, 0, 0); 

     // Step 3: You are creating a NEW data variable 
     var data = context.getImageData(x, y, img.width, img.height).data; 

     // Step 4: And doing nothing with it. 
    }; 

    // Step 2: You are storing the `null` from step 1 
    localStorage.setItem('mysession_imag', data); 
}