Bibliothek zum Überlagern von Text über Daten-URI-Bildern

In HTML kann ich einen Daten-URI verwenden, um Bilder anzuzeigen, um zu vermeiden, dass eine HTTP-Anforderung zum Abrufen von Bildressourcen erforderlich ist. Dies kann nützlich sein, um Symbole anzuzeigen.

Zum Beispiel:

<img width="128" height="128" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFBAcH7+/vgYODwMHBFBcXoaKiYmRkQ0VFIyYmU1VV0NDQMzY24ODgsLGxcnR0kZKS////c4YKVAAAABF0Uk5T/////////////////////wAlrZliAAAEMElEQVR42uya6ZLbIAyAuU/b5P2fttltpg1GgCQ73ekM+pmMrc8CCR2Ixw+LWAALYAEsgAWwABbAAvivAaR+yvYTAMkqn8UfCd4V/c8AthKNgMSr9HkAWbIYSDjSRwGSE1PJ9mMA2guUBPsRgA2pnoqABJCHIIlP9wLoIKii7gQ4BEPydheAzIIlZr8HIBnBlXIHwM7XL4S7DmD7vuYPpeyulIr5AoFg6Q/HLms3KZ5JMAbQ4OaCA760mUMgqPtvFOXAYK34ALLVbyz9vLBsgPZlh5xuKttQm8QEUM2bUFmPbLizZAFo0nuG5AcLINCDStd5NQNA8fU/rXfaCIEOsF3R/3RgtC/2ANwl/c0qGEkEOBkg09PtgjSBwBjAcKqfiDOBwBhgZ+h/yIAygUAYIPKKrjqQGApAfQgYyQM4LYIlAFhWfjtZyEgAqNAD1wDnlZRoAHmPAc4msGiAvbcDZHHeq65PSvv1d+qZIKIBXCcGqtfejLAxy+tvL2FHMGiAAMcANz6YHZSBVK9KSAAJY78fj34cejNc1BUkgAZXoI4Ndhw6LLidHBJAga8qY6e2ncNLjO0GAjhw3eI4sJ7ylz+/Z/DXMYAHn/EdDXD+AP8ucQAZtFocA/QsoGapIQAAL1utwY/zjwDvaAaA6oTVMo66CgbYrwBUawAcUAccvvXsWMEDvHVqoGLrvZGzdyxzDeBvzRXg8jxCvaE7AZ7R5qtN7UsvQdDA3/pWgKuJIWMTxlsBkG4YZuGbIpxA5GfhmyLVebwxDqOLE6H518yO4/0iwLTCFJOc1N24ByMSYEO2FshbQLGS0nQJIEwbNdO0/LiiP4mpR4lZaWiuADALEzmqqPboO3Wudl7JQapc8MVp7m/D78zHA9FBqtbT6ixq45bn1Qe/vkmdT0Qb2o1WGyBTGhSiW5//DRBvISqpALmaYzcoTo8evZPqa2SiVAyw1yZUl0pg+oy6EybH44mM6hcLTKf+fRHSYIZpSi8I9k81gWqVVy6senO0yjksstUqcMOKo/Y4CCHq0bRnowKk4dxF2lOllk+Nm7N+erO6mRc3XqRV9E87Ze/Vfv6+s/5Bp60L0EysCAlyM23bOROTxuEctmHYDEwia2TzaC6MZFRuIJvnDG9oBY3tEcsA3HUYDtsEZSmfRphM7jZHHeILfMP9FW00Tf0srRW07fT7phC8pjt4y2hW3PHG97GcPF/uDg7Q02kn+wKDeR7G+ltKfSATp63iwSXASJyHjnn1eeESCaasQpS/KTD1oy50YepvGTnqA66mwjUAivnE8hMAHhvRCAF9wxPdAqHcZzMKP2kj9GBsuF898UqnRVxqDIo2ZyR2odIx3o6R3NKht8H00bk6ZpxlDFlZfTi5V/eavw8Gy2ylXGgESv2SS628dbt+ASyABbAAFsACWAAL4JcAAwD1fxiuqPBX0wAAAABJRU5ErkJggg==" />

Wird angezeigt:

Smiley-Symbol

Ich möchte etwas Text dynamisch darüber legen. Zum Beispiel:

Smiley-Symbol mit Hallo-Beschriftung darüber

Gibt es eine Javascript-Bibliothek, mit der ich dies tun kann? Idealerweise erlaubt es mir, .pngs zu ändern.

Interessante Frage. Sollte die Änderung auf der Clientseite nach dem Laden der Seite oder auf der Serverseite (wahrscheinlich mit node.js?) Oder irgendwo dazwischen erfolgen?
@Marcel - Kundenseitig.
Ok, wie wäre es so? stackoverflow.com/questions/8708945/… Es würde jedoch eine geringfügige Änderung beim Aufbau der Seite erfordern.

Antworten (1)

Sie können dies mit einem einfachen Javascript tun, das nach jedem Bild Text hinzufügt. Ich habe eine jsFiddle für Sie erstellt:

https://jsfiddle.net/suterma/7npbxxkg/5/

Die Positionierung des Textes ist jedoch etwas schwierig, und das Bild wird physisch nicht verändert. Wenn also ein Benutzer mit der rechten Maustaste klickt, um das Bild herunterzuladen/anzuzeigen, ist der Text verschwunden.

Leider ist dies eine HTML/Div-basierte Lösung. Der von mir verwendete Daten-URI wird tatsächlich an eine JS-Bibliothek übergeben, die ich verwende, um auf einer HTML-Leinwand gezeichnet zu werden, daher muss ich den URI selbst ändern.
Bibliothek zum Überlagern von Text über Daten-URI-Bildern
AntwortenHierDatenschutz-Bestimmungen1y, 0v