从json获取容器尺寸并在css样式标记内显示值

Question

背景 ：

在我将容器尺寸保持在<style>标签之前，如下所示：

.container {
width: 600px;
height: 600px;
}

现在我需要从json文件下面获取容器的宽度和高度，我需要在class .container中显示这些值

{
  "path" : " shape\/",
  "info" : {
    "author" : ""   
  },
  "name" : "shape",
  "layers" : [
    {     
      "height" : 600,
      "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"
        }
      ],      
      "width" : 600
    }
  ]
}

这是Full script和json file

如果Css在Javascript文件中，那么我可以通过在img.css中使用下面的代码来获取尺寸，但是如何在样式标记css的css类中显示那些高度和宽度？

$(document).ready(function() {

var maskedImageUrla = "";
var coordinates = { x: 0, y: 0 };

$.getJSON('test.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) maskedImageUrla = temp.src;
                else if (temp.layers) {
                    for (let tl of temp.layers)
                        if (tl.src) {
                            maskedImageUrla = 'http:///sitename.com/test/images/' + tl.src;
                            coordinates.x = temp.x;
                            coordinates.y = temp.y;
                        }
                }
            }
        }
    }
        var mask1 = $(".container").mask({
            maskImageUrl: maskedImageUrla,
            onMaskImageCreate: function(img) {

                img.css({
                    "position": "fixed",
                    "left": coordinates.x + "px",
                    "top": coordinates.y + "px" 
                });
            }
        });

Answer 1

请用相同的getJSON替换您的代码

$.getJSON('test.json', function(json) { 
   for (let layer of json.layers) { 
      width = layer.width; 
      height = layer.height; 
      if (layer.layers && layer.layers.length > 0) { 
         for (let temp of layer.layers) { 
           if (temp.src) maskedImageUrla = temp.src; 
           else if (temp.layers) { 
                for (let tl of temp.layers) 
                    if (tl.src) { 
                        maskedImageUrla = '139.59.24.243/ecom1/site/test/…' + tl.src; 
                        coordinates.x = temp.x; 
                        coordinates.y = temp.y; 
                    } 
                } 
           } 
     } 
}
$(".container").css('width',width+"px").css('height',height+"px").css('background',"red");

Answer 2

添加宽度和高度就像使用jQuery.css()函数为图像添加样式一样：

img.css({
  "position": "fixed",
  "left": coordinates.x + "px",
  "top": coordinates.y + "px"
});

let width = 0;
let height = 0;
let container = $('.container');

// parse width and height from JSON

container.css({
  "width": width + "px",
  "height": height + "px"
});

const jsonString = '{"path":"shape\/","info":{"author":""},"name":"shape","layers":[{"height":600,"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"}],"width":600}]}';

$(document).ready(function() {
  const container = $(".container");
  let maskedImageUrla = "";
  let coordinates = {
    x: 0,
    y: 0
  };
  let width = 0;
  let height = 0;

  const json = JSON.parse(jsonString);

  for (let layer of json.layers) {
    width = layer.width;
    height = layer.height;
    
    if (layer.layers && layer.layers.length > 0) {
      for (let temp of layer.layers) {
        if (temp.src) maskedImageUrla = temp.src;
        else if (temp.layers) {
          for (let tl of temp.layers)
            if (tl.src) {
              maskedImageUrla = 'http://139.59.24.243/ecom1/site/test/images/' + tl.src;
              coordinates.x = temp.x;
              coordinates.y = temp.y;
            }
        }
      }
    }
  }

  container.css({
    "width": width + "px",
    "height": height + "px"
  })
  
  var mask1 = container.mask({
    maskImageUrl: maskedImageUrla,
    onMaskImageCreate: function(img) {

      img.attr('style', "width:" + coordinates.x + "px; height:" + coordinates.y + "px");
      img.css({
        "position": "fixed",
        "left": coordinates.x + "px",
        "top": coordinates.y + "px"
      });
    }
  });
}); // end of document ready

// JQuery Mask Plugin
(function($){var JQmasks=[];$.fn.mask=function(options){var settings=$.extend({maskImageUrl:undefined,imageUrl:undefined,scale:1,id:new Date().getUTCMilliseconds().toString(),x:0,y:0,onMaskImageCreate:function(div){},},options);var container=$(this);let prevX=0,prevY=0,draggable=!1,img,canvas,context,image,timeout,initImage=!1,startX=settings.x,startY=settings.y,div;container.mousePosition=function(event){return{x:event.pageX||event.offsetX,y:event.pageY||event.offsetY}}
container.selected=function(ev){var pos=container.mousePosition(ev);var item=$(".masked-img canvas").filter(function(){var offset=$(this).offset()
var x=pos.x-offset.left;var y=pos.y-offset.top;var d=this.getContext('2d').getImageData(x,y,1,1).data;return d[0]>0});JQmasks.forEach(function(el){var id=item.length>0?$(item).attr("id"):"";if(el.id==id)
el.item.enable();else el.item.disable()})};container.enable=function(){draggable=!0;$(canvas).attr("active","true");div.css({"z-index":2})}
container.disable=function(){draggable=!1;$(canvas).attr("active","false");div.css({"z-index":1})}
container.onDragStart=function(evt){container.selected(evt);prevX=evt.clientX;prevY=evt.clientY};container.getImagePosition=function(){return{x:settings.x,y:settings.y,scale:settings.scale}};container.onDragOver=function(evt){if(draggable&&$(canvas).attr("active")==="true"){var x=settings.x+evt.clientX-prevX;var y=settings.y+evt.clientY-prevY;if(x==settings.x&&y==settings.y)
return;settings.x+=evt.clientX-prevX;settings.y+=evt.clientY-prevY;prevX=evt.clientX;prevY=evt.clientY;container.updateStyle()}};container.updateStyle=function(){clearTimeout(timeout);timeout=setTimeout(function(){context.clearRect(0,0,canvas.width,canvas.height);context.beginPath();context.globalCompositeOperation="source-over";image=new Image();image.setAttribute('crossOrigin','anonymous');image.src=settings.maskImageUrl;image.onload=function(){canvas.width=image.width;canvas.height=image.height;context.drawImage(image,0,0,image.width,image.height);div.css({"width":image.width,"height":image.height})};img=new Image();img.src=settings.imageUrl;img.setAttribute('crossOrigin','anonymous');img.onload=function(){settings.x=settings.x==0&&initImage?(canvas.width-(img.width*settings.scale))/2:settings.x;settings.y=settings.y==0&&initImage?(canvas.height-(img.height*settings.scale))/2:settings.y;context.globalCompositeOperation='source-atop';context.drawImage(img,settings.x,settings.y,img.width*settings.scale,img.height*settings.scale);initImage=!1}},0)};container.loadImage=function(imageUrl){if(img)
img.remove();settings.y=startY;settings.x=startX;prevX=prevY=0;settings.imageUrl=imageUrl;initImage=!0;container.updateStyle()};container.loadMaskImage=function(imageUrl,from){if(div)
div.remove();canvas=document.createElement("canvas");context=canvas.getContext('2d');canvas.setAttribute("draggable","true");canvas.setAttribute("id",settings.id);settings.maskImageUrl=imageUrl;div=$("<div/>",{"class":"masked-img"}).append(canvas);div.find("canvas").on('touchstart mousedown',function(event){if(event.handled===!1)return;event.handled=!0;container.onDragStart(event)});div.find("canvas").on('touchend mouseup',function(event){if(event.handled===!1)return;event.handled=!0;container.selected(event)});div.find("canvas").bind("dragover",container.onDragOver);container.append(div);if(settings.onMaskImageCreate)
settings.onMaskImageCreate(div);container.loadImage(settings.imageUrl)};container.loadMaskImage(settings.maskImageUrl);JQmasks.push({item:container,id:settings.id})
return container}}(jQuery))

.container {
  border: 1px solid #DDDDDD;
  display: flex;
  background: red;
}

.container canvas {
  display: block;
}

.masked-img {
  overflow: hidden;
  margin-top: 50px;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
</div>