在另一張圖片上方顯示超棒的字體圖標

Question

我正在從json獲取圖像源並在html頁面中顯示...。

在圖像上方，我想添加如下字體超贊圖標...。

所以我嘗試了下面的代碼，但是字體真棒圖標沒有顯示。

HTML

<link 
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
rel="stylesheet" type='text/css' >

腳本

$(document).ready(function() {
            var maskedImageUrla = "";
            var fontawesome = "<i class='fa fa-user-plus fa-2x'></i>";

            $.getJSON('test.json', function(json) {

              if (tl.src)
               {
                 maskedImageUrla = 'http://sitename.com/images/' + tl.src;
               }

                        var mask1 = $(".container").mask({
                            maskImageUrl: maskedImageUrla,
                            fontawesome: fontawesome,
                            onMaskImageCreate: function(img) {}
                        });
}); // end of document ready

這是json文件

這是https://codepen.io/kidsdial/pen/bZNNXJ

更新 ：我在下面添加了代碼片段。

 var mask1; $(document).ready(function() { var maskedImageUrla = ""; var fontawesome = "<i class='fa fa-user-plus fa-2x'></i>"; var coordinates = { x: 0, y: 0 }; var width = 0; var height = 0; var json = { "path" : " love shape\\/", "info" : { "author" : "", "keywords" : "", "file" : "love shape", "date" : "sRGB", "title" : "", "description" : "Normal", "generator" : "Export Kit v1.2.8" }, "name" : "love shape", "layers" : [ { "x" : 0, "height" : 612, "layers" : [ { "x" : 0, "color" : "0xFFFFFF", "height" : 612, "y" : 0, "width" : 612, "shapeType" : "rectangle", "type" : "shape", "name" : "bg_rectangle_1" }, { "x" : 49, "height" : 480, "layers" : [ { "x" : 0, "height" : 480, "src" : "hQ45RtK.png", "y" : 0, "width" : 514, "type" : "image", "name" : "mask_image_1" }, { "radius" : "27 \\/ 27", "color" : "0xACACAC", "x" : 233, "y" : 205, "height" : 53, "width" : 53, "shapeType" : "ellipse", "type" : "shape", "name" : "useradd_ellipse1" } ], "y" : 66, "width" : 514, "type" : "group", "name" : "user_image_1" } ], "y" : 0, "width" : 612, "type" : "group", "name" : "loveshape_18" } ] }; 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 = 'https://i.imgur.com/' + tl.src; coordinates.x = temp.x; coordinates.y = temp.y; } } } } } $(".container").css('width', width + "px").css('height', height + "px").addClass('temp'); var mask1 = $(".container").mask({ maskImageUrl: maskedImageUrla, fontawesome : fontawesome, onMaskImageCreate: function(img) { img.css({ "position": "fixed", "left": coordinates.x + "px", "top": coordinates.y + "px" }); } }); fileupa1.onchange = function() { mask1.loadImage(URL.createObjectURL(fileupa1.files[0])); }; }); // end of document ready // jq plugin for mask (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) { 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; // position has not changed 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 = false; }; }, 0); }; // change the draggable image container.loadImage = function(imageUrl) { 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) { 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); }; container.loadMaskImage(settings.maskImageUrl); JQmasks.push({ item: container, id: settings.id }) return container; }; }(jQuery)); 

 .temp { border: 1px solid #DDDDDD; display: flex; background :silver; } .container canvas { display: block; } .masked-img { overflow: hidden; margin-top: 50px; position: relative; } 

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type='text/css' > image 1 <input id="fileupa1" type="file"> <div class="container"> </div> 

Answer 1

希望這是您正在尋找的結果

 var mask1; $(document).ready(function() { var maskedImageUrla = ""; var fontawesome = "<i class='fa fa-user-plus fa-2x'></i>"; var coordinates = { x: 0, y: 0 }; var width = 0; var height = 0; var json = { "path" : " love shape\\/", "info" : { "author" : "", "keywords" : "", "file" : "love shape", "date" : "sRGB", "title" : "", "description" : "Normal", "generator" : "Export Kit v1.2.8" }, "name" : "love shape", "layers" : [ { "x" : 0, "height" : 612, "layers" : [ { "x" : 0, "color" : "0xFFFFFF", "height" : 612, "y" : 0, "width" : 612, "shapeType" : "rectangle", "type" : "shape", "name" : "bg_rectangle_1" }, { "x" : 49, "height" : 480, "layers" : [ { "x" : 0, "height" : 480, "src" : "hQ45RtK.png", "y" : 0, "width" : 514, "type" : "image", "name" : "mask_image_1" }, { "radius" : "27 \\/ 27", "color" : "0xACACAC", "x" : 233, "y" : 205, "height" : 53, "width" : 53, "shapeType" : "ellipse", "type" : "shape", "name" : "useradd_ellipse1" } ], "y" : 66, "width" : 514, "type" : "group", "name" : "user_image_1" } ], "y" : 0, "width" : 612, "type" : "group", "name" : "loveshape_18" } ] }; 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 = 'https://i.imgur.com/' + tl.src; coordinates.x = temp.x; coordinates.y = temp.y; } } } } } $(".container").css('width', width + "px").css('height', height + "px").addClass('temp'); var mask1 = $(".container").mask({ maskImageUrl: maskedImageUrla, fontawesome : fontawesome, onMaskImageCreate: function(img) { img.css({ "position": "fixed", "left": coordinates.x + "px", "top": coordinates.y + "px" }); } }); fileupa1.onchange = function() { mask1.loadImage(URL.createObjectURL(fileupa1.files[0])); }; }); // end of document ready // jq plugin for mask (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) { 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; // position has not changed 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 = false; }; }, 0); }; // change the draggable image container.loadImage = function(imageUrl) { 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) { 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); }; container.loadMaskImage(settings.maskImageUrl); JQmasks.push({ item: container, id: settings.id }) return container; }; }(jQuery)); 

 .temp { border: 1px solid #DDDDDD; display: flex; background :silver; } .container { position : relative } .container i { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:20px; width:20px; z-index:999; } .container canvas { display: block; } .masked-img { overflow: hidden; margin-top: 50px; position: relative; } 

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> image 1 <input id="fileupa1" type="file"> <div class="container"> <i class="fas fa-user-plus"></i> </div>