显示基于json颜色代码0xAF001D的文本颜色

Question

我需要从json文件下面获取颜色代码：

{ 
"text" : "VALENTINES DAY ",
"color" : "0xAF001D" 
} 

所以我尝试了以下代码：

$('.container').append(
            '<div class="txtContainer" ' +
            'style="' +                                   
            'color: ' + layer.color + '; ' +                
            '">' +
            layer.text +
            '</div>');
    }

问题：

如果我使用颜色名称作为“颜色”：“红色”或“颜色”：“＃AF001D” ，则可以正常使用...。但是对于 0x 颜色代码“ color”：“ 0xAF001D” ，它无法正确提取，而是以白色显示。....

与其像下面的图片一样显示，

它显示如下图所示：

如果有人要，下面是完整代码：

Codepen：https://codepen.io/kidsdial/pen/bZOGeK

var target;
var imageUrl = "https://i.imgur.com/RzEm1WK.png";

let jsonData = {
  "path" : " fb post\/",
  "info" : {
    "author" : "",
    "keywords" : "",
    "file" : "fb post",
    "date" : "sRGB",
    "title" : "",
    "description" : "Normal",
    "generator" : "Export Kit v1.2.8"
  },
  "name" : "fb post",
  "layers" : [
    {
      "x" : 0,
      "height" : 788,
      "layers" : [
        {
          "x" : 0,
          "height" : 788,
          "src" : "",
          "y" : 0,
          "width" : 940,
          "type" : "image",
          "name" : "bg_image"
        },
        {
          "x" : 290,
          "height" : 788,
          "src" : "",
          "y" : 0,
          "width" : 650,
          "type" : "image",
          "name" : "shape_1"
        },
        {
          "x" : 450,
          "height" : 140,
          "src" : "",
          "y" : 304,
          "width" : 430,
          "type" : "image",
          "name" : "shape_2"
        },
        {
          "justification" : "center",
          "font" : "MyriadPro-Regular",
          "x" : 555,
          "y" : 579,
          "src" : "70d83a42df6cebb355f5be7ccc0bc4c4_MyriadPro-Regular.otf",
          "width" : 220,
          "type" : "text",
          "color" : "0xAF001D",
          "size" : 12,
          "text" : "Reservation recommended +00 123 456 789 ",
          "height" : 9,
          "name" : "edit_reservation"
        },
        {
          "justification" : "center",
          "font" : "MyriadPro-Regular",
          "x" : 522,
          "y" : 513,
          "src" : "70d83a42df6cebb355f5be7ccc0bc4c4_MyriadPro-Regular.otf",
          "width" : 283,
          "type" : "text",
          "color" : "0xAF001D",
          "size" : 9,
          "text" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.",
          "height" : 45,
          "name" : "edit_body"
        },
        {
          "justification" : "center",
          "font" : "Montserrat-Bold",
          "x" : 598,
          "uppercase" : true,
          "y" : 486,
          "width" : 134,
          "src" : "2ccd95bae3f2a0c8249205ca5dfbed24_Montserrat-Bold.ttf",
          "type" : "text",
          "color" : "0xAF001D",
          "size" : 15,
          "text" : "35$ per person",
          "height" : 13,
          "name" : "edit_price"
        },
        {
          "justification" : "center",
          "font" : "MyriadPro-Regular",
          "x" : 507,
          "uppercase" : true,
          "y" : 464,
          "width" : 316,
          "src" : "70d83a42df6cebb355f5be7ccc0bc4c4_MyriadPro-Regular.otf",
          "type" : "text",
          "color" : "0xAF001D",
          "size" : 19,
          "text" : "4 COURSE DINNER & FIRST DRINK FOR 2",
          "height" : 13,
          "name" : "edit_info"
        },
        {
          "justification" : "center",
          "font" : "ArchivoNarrow-Bold",
          "x" : 559,
          "uppercase" : true,
          "y" : 257,
          "width" : 211,
          "src" : "611aa93612da8fde1b17d87368355d1f_Font83.otf",
          "type" : "text",
          "color" : "0xAF001D",
          "size" : 30,
          "text" : "VALENTINES DAY ",
          "height" : 22,
          "name" : "edit_sale"
        }
      ],
      "y" : 0,
      "width" : 940,
      "type" : "group",
      "name" : "fb_post_5"
    }
  ]
};

$(document).ready(function() {

    // upload image onclick

    $('.container').click(function(e) {
  // filtering out non-canvas clicks
  if (e.target.tagName !== 'CANVAS') return;

  // getting absolute points relative to container
  const absX = e.offsetX + e.target.parentNode.offsetLeft + e.currentTarget.offsetLeft;
  const absY = e.offsetY + e.target.parentNode.offsetTop + e.currentTarget.offsetTop;

  const $canvasList = $(this).find('canvas');
  // moving all canvas parents on the same z-index
  $canvasList.parent().css({zIndex: 0});

  $canvasList.filter(function () { // filtering only applicable canvases
    const bbox = this.getBoundingClientRect()
    return (
      absX >= bbox.left && absX <= bbox.left + bbox.width &&
      absY >= bbox.top && absY <= bbox.top + bbox.height)
  }).each(function () { // checking white in a click position
    const x = absX - this.parentNode.offsetLeft - e.currentTarget.offsetLeft;
    const y = absY - this.parentNode.offsetTop - e.currentTarget.offsetTop;
    const pixel = this.getContext('2d').getImageData(x, y, 1, 1).data;
    if (pixel[3] === 255) {
      $(this).parent().css({zIndex: 2})
      target = this.id;
      console.log(target);
      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({
                		imageUrl: imageUrl,
                    maskImageUrl: 'http://piccellsapp.com:1337/parse/files/PfAppId/' + 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++;
				// get the text
				
            }
drawText(data);
        }

json(jsonData);
}); // end of document ready


// extempl code - get the text

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="' +
			'text-align: ' + layer.justification + '; ' +
			'font-family: ' + layer.font + '; ' +
            'left: ' + layer.x + 'px; ' +
            'top: ' + layer.y + 'px; ' +
			'width:' + layer.width + 'px; ' +                       
			'color: ' + layer.color + '; ' +
            'font-size: ' + layer.size + 'px; ' +
             'height:' + layer.height + 'px;' +
            '">' +
            layer.text +
            '</div>');
    }

}
// extempl code end	



// jq plugin 

(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.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 = true;
            $(canvas).attr("active", "true");
            div.css({
                "z-index": 2
            });
        }

        container.disable = function() {
            draggable = false;
            $(canvas).attr("active", "false");
            div.css({
                "z-index": 1
            });
        }

        container.onDragStart = function(evt) {
            if (evt.target.getContext) {
                var pixel = evt.target.getContext('2d').getImageData(evt.offsetX, evt.offsetY, 1, 1).data;

                $(canvas).attr("active", "true");
                container.selected(evt);
                prevX = evt.clientX;
                prevY = evt.clientY;
                var img = new Image();
                evt.originalEvent.dataTransfer.setDragImage(img, 10, 10);
                evt.originalEvent.dataTransfer.setData('text/plain', 'anything');

            }
        };

        container.getImagePosition = function() {
            return {
                x: settings.x,
                y: settings.y,
                scale: settings.scale
            };
        };

        container.onDragOver = function(evt) {

            if (evt.target.getContext) {
                var pixel = evt.target.getContext('2d').getImageData(evt.offsetX, evt.offsetY, 1, 1).data;
                if (pixel[3] === 255) {
                    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; // position has not changed
                        settings.x += evt.clientX - prevX;
                        settings.y += evt.clientY - prevY;
                        prevX = evt.clientX;
                        prevY = evt.clientY;
                        updateStyle();
                    }
                } else {
                    evt.stopPropagation();
                    return false;
                }
            }
        };

        function updateStyle() 
		{		    
                //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.setAttribute('crossOrigin', 'anonymous');
                img.src = settings.imageUrl;
                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 = false;
                };
            };
        };

        // 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;
            updateStyle();
        };

        // change the masked Image
        function loadMaskImage(imageUrl) {
            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)
            div.find("canvas").on('dragstart', function(event) {
                if (event.handled === false) return;
                event.handled = true;
                container.onDragStart(event);
            });

            div.find("canvas").on('touchend mouseup', function(event) {
                if (event.handled === false) return;
                event.handled = true;
                container.selected(event);
            });

            div.find("canvas").bind("dragover", container.onDragOver);
            container.append(div);
            if (settings.onMaskImageCreate)
                settings.onMaskImageCreate(div);
            container.loadImage(settings.imageUrl);
        };
        loadMaskImage(settings.maskImageUrl);
        JQmasks.push({
            item: container,
            id: settings.id
        })
        return container;
    };
}(jQuery));

.temp {}

.container {
	background: gold;
  position: relative;
 
}

.container img {
   position:absolute;
   top:0;
   bottom:250px;
   left:0;
   right:0;
   margin:auto;
   z-index:999;
}

.masked-img {
	overflow: hidden;	
	position: relative;
}

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

<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

以下代码演示了以上评论所讨论的内容。

var fixedColor = layer.color.replace('0x','#');

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