背景：
在将容器尺寸保存在<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
}
]
}
如果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"
});
}
});
答案 0 :(得分：1)
就像使用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>
答案 1 :(得分：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");