Question

我正在此codepen1的帮助下从JSON提取图像：https://codepen.io/kidsdial/pen/Qomgva

现在连同图像一起，我需要获取文本，所以我尝试了Codepen2： https://codepen.io/kidsdial/pen/bZvRgR，但未显示文本。...

文本“ 好食物，好生活”应显示如下图：

var target;

let jsonData = {  
"layers" : [
    {
      "x" : 0,     
      "layers" : [
        {
          "x" : 0,         
          "src" : "Y1rcR8A.jpg",
          "y" : 0
        },
        {
          "x" : 476,         
          "src" : "0x7hnlG.png",
          "y" : 326
        },
        {
          "justification" : "center",         
          "x" : 357,
          "y" : 633,
          "src" : "2ccd95bae3f2a0c8249205ca5dfbed24_Montserrat-Bold.ttf",        
          "type" : "text",         
          "text" : "GOOD LIFE"          
        },
        {
          "justification" : "center",          
          "x" : 201,
          "y" : 461,
          "src" : "180ef82d12e3eee668a3f6b51ea444e9_Font972.otf",         
          "type" : "text",         
          "text" : "Good Food",
          "height" : 174         
        }
      ],
      "y" : 0      
    }
  ]
};


$(document).ready(function() {

    // upload image onclick

    $('.container').click(function(e) {

        var res = e.target;
        target = res.id;
        console.log(target);
        if (e.target.getContext) {
            // click only inside Non Transparent part
            var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
            if (pixel[3] === 255) {
                setTimeout(() => {
                    $('#fileup').click();
                }, 20);
            }
        }

    });

    function getAllSrc(layers) {
        let arr = [];
        layers.forEach(layer => {
            if (layer.src) {
                arr.push({
                    src: layer.src,
                    x: layer.x,
                    y: layer.y
                });
            } else if (layer.layers) {
                let newArr = getAllSrc(layer.layers);
                if (newArr.length > 0) {
                    newArr.forEach(({
                        src,
                        x,
                        y
                    }) => {
                        arr.push({
                            src,
                            x: (layer.x + x),
                            y: (layer.y + y)
                        });
                    });
                }
            }
        });
        return arr;
    }

    function json(data)

    {
        var width = 0;
        var height = 0;

        let arr = getAllSrc(data.layers);

        let layer1 = data.layers;
        width = layer1[0].width;
        height = layer1[0].height;
        let counter = 0;
        let table = [];

        for (let {
                src,
                x,
                y
            } of arr) {

            $(".container").css('width', width + "px").css('height', height + "px").addClass('temp');

            var mask = $(".container").mask({
                maskImageUrl: 'https://i.imgur.com/' + src,             
                onMaskImageCreate: function(img) {

                    img.css({
                        "position": "absolute",
                        "left": x + "px",
                        "top": y + "px"
                    });

                },
                id: counter
            });
            table.push(mask);
            fileup.onchange = function() {

                let mask2 = table[target];
               
                    mask2.loadImage(URL.createObjectURL(fileup.files[0]));
              
                    document.getElementById('fileup').value = "";
            };
            counter++;
        }

    }

    json(jsonData);
}); // end of document ready

(function($) {
    var JQmasks = [];
    $.fn.mask = function(options) {
        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            maskImageUrl: undefined,
            imageUrl: undefined,
            scale: 1,
            id: new Date().getUTCMilliseconds().toString(),
            x: 0, // image start position
            y: 0, // image start position
            onMaskImageCreate: function(div) {},
        }, options);


        var container = $(this);

        let prevX = 0,
            prevY = 0,
            draggable = false,
            img,
            canvas,
            context,
            image,
            timeout,
            initImage = false,
            startX = settings.x,
            startY = settings.y,
            div;

        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
                    });
                };



            }, 20);
        };

        // change the draggable image
        container.loadImage = function(imageUrl) {
            console.log("load");
            if (img)
                img.remove();
            // reset the code.
            settings.y = startY;
            settings.x = startX;
            prevX = prevY = 0;
            settings.imageUrl = imageUrl;
            initImage = true;
            container.updateStyle();
        };

        // change the masked Image
        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)

            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 {
	background: black;
  position: relative;
 
}

.masked-img {
	overflow: hidden;	
	position: relative;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<input id="fileup" name="fileup" type="file" style="display:none" >

<div class="container">

</div>

如果您需要其他任何信息，请告诉我。...

Answer 1

在html和css中使用以下代码。

 <div class="container">  
   <img src="/image_path_here"> 
   <div class="txtContainer"></div> 
</div>

.txtContainer{ position:absolute; bottom:30px; text-align:center; }

编辑：

我的意思是说在加载图像后立即使用JQuery创建此结构。注意：这是静态访问第一张图片的文本，但是我想您可以实现此功能以获取每张图片的文本。

$('.container').append('<div class="txtContainer">'+data.layers[0].layers[2].text+'</div>');

编辑2：那只是关于实现的想法，现在我已经实现了，我认为字体系列不起作用，否则文本显示正确。因此，现在您只需要动态传递索引即可显示多张图像。

CSS：

.txtContainer{ position:absolute;  text-align:center; color:#FFF}

JS：插入一个：-

     $('.container').append('<div class="txtContainer" style="left:'+data.layers[0].layers[2].x+'px;top:'+data.layers[0].layers[2].y+'px;font-size:'+data.layers[0].layers[2].size+'px;font-family:'+data.layers[0].layers[2].font+';width:'+data.layers[0].layers[2].width+'px;height:'+data.layers[0].layers[2].height+'px;">'+data.layers[0].layers[2].text+'</div>');

$('.container').append('<div class="txtContainer" style="left:'+data.layers[0].layers[3].x+'px;top:'+data.layers[0].layers[3].y+'px;font-size:'+data.layers[0].layers[3].size+'px;font-family:'+data.layers[0].layers[3].font+';width:'+data.layers[0].layers[3].width+'px;height:'+data.layers[0].layers[3].height+'px;">'+data.layers[0].layers[3].text+'</div>');

如果您仍然遇到任何问题，请告诉我。

Answer 2

通过加载字体将Ashvani的答案扩展为动态的：

const fonts = [];// caching duplicate fonts

function drawText(layer) {

  if (layer.type === 'image') return;

  if (!layer.type || layer.type === 'group') {
    return layer.layers.forEach(drawText)
  }

  if (layer.type === 'text') {
    const url = 'http://piccellsapp.com:1337/parse/files/PfAppId/' + layer.src;

    if (!fonts.includes(url)) {
      fonts.push(url);
      $("style").prepend("@font-face {\n" +
        "\tfont-family: \"" + layer.font + "\";\n" +
        "\tsrc: url(" + url + ") format('truetype');\n" +
        "}");
    }

    $('.container').append(
      '<div class="txtContainer" ' +
      'style="' +
      'left: ' + layer.x + 'px; ' +
      'top: ' + layer.y + 'px; ' +
      'font-size: ' + layer.size + 'px; ' +
      'font-family: ' + layer.font + '; ' +
      // 'width:' + layer.width + 'px; ' +
      // 'height:' + layer.height + 'px;' +
      '">' +
      layer.text +
      '</div>');
  }

}

然后

drawText(data);

紧接着

for (let {
                src,
                x,
                y
            } of arr) {
....
}

部分。

请注意，由于http上提供了字体，而https上提供了代码笔，因此无法加载codepen上的字体。您应该在本地打开html文件以查看结果。

Answer 3

那么您想在变量中获取src和文本吗？

console.log(jsonData.layers[0].layers[0].src); //Y1rcR8A.jpg //输出src

console.log(jsonData.layers[0].layers[2].text); //良好的生活//输出文字

如果您要循环浏览，请使用循环计数器替换aray索引

从json文件获取Text值

3 个答案: