Question

在将Image路径放入变量中之前，如下所示：

脚本

$(document).ready(function()
{
 var output = "http://sitename.com/images/oneheart.png";
 //some other code
});

现在我需要从Json文件中获取图像路径，所以我尝试如下操作：

Json和html文件都在同一路径中。...

Json ：

{
  "path" : " shape\/",
  "info" : {
    "author" : ""   
  },
  "name" : "shape",
  "layers" : [
    {     
      "height" : 612,
      "layers" : [
        {         
          "name" : "bg_rectangle_1"
        },
        {         
          "height" : 475,
          "layers" : [
            {

              "src" : "http://sitename.com/images/oneheart.png",             
              "name" : "mask_image_1"
            },
            {              
              "name" : "useradd_ellipse1"
            }
          ],          
          "name" : "user_image_1"
        }
      ],      
      "name" : "loveshape_17"
    }
  ]
}

脚本：

$(document).ready(function() {

    $.getJSON('oneheart.json', function(data) // Get data from JSON file
        {
            var json = $.parseJSON(data);
            for (var i = 0; i < json.layers.length; i++) {
                var output += json.layers[i].src; // Place image in variable 
            }
        });
    // Some other code
});

这是Full Json file in pastebin，完整代码在codepen

Answer 1

您需要手动解析JSON文件并获取图片网址。做这样的事情

$.getJSON('./oneheart.json', function(json){
  //var json = $.parse(data);
  var imageUrl = "";
  for(let layer of json.layers){
    if(layer.layers && layer.layers.length > 0){
      for(let temp of layer.layers){
        if(temp.src) imageUrl = temp.src;
      }
    }
  }

  var output="";
  if(imageUrl){
    console.log(imageUrl);
    output=imageUrl;
  }

});

这是异步操作，您需要将其他代码放入函数中并在此回调中调用

Answer 2

仅在您的json文件处理程序中声明您的输出变量。在// some other code处不再可用。由于我猜想json加载将异步发生，因此仅将变量声明移到json文件处理程序之外是不够的。您可以在json文件处理程序中执行所有操作。或者您使用jqXHR Api

之类的承诺

另外，您似乎希望所有src都作为数组中的单个值而不是串联的字符串。因此，您想map遍及所有图层。

$(document).ready(function() {
  $.getJSON('oneheart.json')
    .done(parseData)
    .done(doSthWithOutput)
    .fail(handleError);
}

function parseData(data){
  if (!data){throw "missing data"};
  var json = $.parseJSON(data);
  return json.layers.map(function(layer){return layer.src;});
}

function doSthWithOutput(output){
  // Some more code
}

function handleError(err) {
  // do something in case of error
}

Answer 3

如下更新您的代码，它应该可以工作。

$(document).ready(function() {
var output= "";
var mask1;
//Shubham Chaudhary code

$.getJSON('./oneheart.json', function(json){
  for(let layer of json.layers){
    if(layer.layers && layer.layers.length > 0){
      for(let temp of layer.layers){
        if(temp.src) output = temp.src;
        else if (temp.layers){
          for(let tl of temp.layers)
             if(tl.src) output = tl.src;
        }
      }
    }
  }

      mask1 = $(".container").mask({
        maskImageUrl: output,
        onMaskImageCreate: function(img) {
            img.css({
                "position": "fixed",
                "left": 73,
                "top": 1
          });
        }
    });
});
}); // end of document ready

从Json获取图像路径并分配给变量

3 个答案: