将图像从URL存储到本地存储

Question

I have a JSON string as below which contains the path of an image. The image exists in the server

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

This is my meta

<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">

I want to store the image to a local session. I use the below Javascipt where I pass the full image URL. It always returns 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

Remember, you have an async call.

The code will run in the steps I have mentioned in the comments.

In short, you are creating a second variable, also called data and then doing nothing with it.

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);
}