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

Posted 2023-05-08

【中文标题】从 json 获取容器尺寸并在 css 样式标签中显示值

【英文标题】：Get the container dimensions from json and display values inside css style tag

【发布时间】：2019-07-18 15:58:09

【问题描述】：

背景：

在我将容器尺寸保存在<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" 
                );
            
        );

【问题讨论】：

如果这是不可能的，那么有什么解决方法吗？意味着将容器值保存在 html 或 javascript 代码中？如果有怎么办？

可以像这样直接添加属性 img.attr('style',"width:"+coordinates.x+"px; height:"+coordinates.y+"px");

@FirozTennali 谢谢，你能告诉我需要把代码放在哪里吗？

在onMaskImageCreate回调函数第一行..

我按照你的建议添加了，你能检查一下是否正确：pastebin.com/0cXu91f2？

【参考方案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");

【讨论】：

谢谢，效果很好，如何动态获取 layer1 的高度和宽度？

【参考方案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)returnx: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()returnx: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>

【讨论】：

谢谢，我在这里更新了你的代码：pastebin.com/5mP2DyCe，这里是link，但结果还是一样.....之前就像this link

好吧，你只是复制粘贴了我的答案，这显然行不通。我没有为你编程，我只是向你暗示了一个方向。您必须在 getJSON() 调用的回调中自己解析宽度和高度。

@vickeycolors 我添加了一个 sn-p。