在另一个图像上显示字体真棒图标
Posted
技术标签:
【中文标题】在另一个图像上显示字体真棒图标【英文标题】：Display font-awesome icon on top of another image 【发布时间】：2019-07-19 16:50:55 【问题描述】：我正在从 json 获取图像源并显示在 html 页面中......
在图片顶部，我想添加 font-awesome 图标，如下所示....
所以我尝试了下面的代码，但是字体很棒的图标没有显示......
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 file
这里是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>【问题讨论】：
【参考方案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>【讨论】：
以上是关于在另一个图像上显示字体真棒图标的主要内容，如果未能解决你的问题，请参考以下文章