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

 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>