Schreiben von text auf vorhandenen PNG mit Node.js

Ich versuche zu schaffen, die eine einfache dynamische-Abzeichen (png) zum einbinden in statische Seiten zu lassen wissen, den status meiner Bewerbung.

Ich würde gerne so verwenden Sie eine vorhandene PNG-Bild und schreiben Sie auf es ein text mit Node.js.

Ich habe festgestellt, viele Bibliotheken, aber alle von Ihnen verwenden Imagemagick oder Kairo, die als native Abhängigkeiten, möchte ich vermeiden zu installieren alles andere auf dem server.

Habe ich dann festgestellt, dass iwip, aber ich kann wirklich nicht verstehen, wie schreibt man einen text über ein Bild mit ihm. Wie kann ich das machen?

  • Als alternative, halten Sie das einwickeln der PNG in ein SVG und fügen Sie Ihren text in dieser Weise? Meine Antwort here zeigt die Grundlagen dieses Ansatzes.
  • svg wird nicht von alten Browsern unterstützt, so dass ich nicht glaube, wäre einer genug cross-browser-Lösung...
  • Ich sehe Ihren Punkt. Die Frage ist dann, wie weit zurück willst du gehen Sie in Ihren browser-Unterstützung? PNG wird nicht unterstützt alte Browser entweder... Man könnte auch das Rendern der SVG zurück zu PNG mit z.B. npmjs.org/package/svg2png
  • ja aber es ist viel mehr unterstützt als svg
  • Du hast Recht, natürlich.
InformationsquelleAutor Fez Vrasta | 2014-10-10
  1. 21

    Könnten Sie Jimp. Es hat eine print-Methode:

    var Jimp = require("jimp");

var fileName = 'test.png';
var imageCaption = 'Image caption';
var loadedImage;

Jimp.read(fileName)
    .then(function (image) {
        loadedImage = image;
        return Jimp.loadFont(Jimp.FONT_SANS_16_BLACK);
    })
    .then(function (font) {
        loadedImage.print(font, 10, 10, imageCaption)
                   .write(fileName);
    })
    .catch(function (err) {
        console.error(err);
    });
    • Oder, es sieht aus, dass jeder unterstützt SVG in diesen Tagen: caniuse.com/#feat=svg
    • Mit Jimp Sie können text schreiben mit jeder Größe und Farbe.
    • Sie können.
    • Können wir hinzufügen, ein rechteckiges overlay auf der Oberseite und der text innerhalb des overlay? mit JIMP?
    • Die Einschränkung habe ich Quelle mit Jimp ist, dass Sie MÜSSEN verwenden Sie bitmap-Bilder, und es ist nicht trivial zu gehen, aus einer ttf eine fnt-Datei.
    • Sie haben erwähnt, dass ttf, um fnt-Datei ist nicht trivial . gut, ich versuche das von gestern, und nicht in der Lage gewesen, es zu tun. stackoverflow.com/questions/24529369/... ich bin nach diesem link, aber immer noch keine Hilfe.
    • Ich bin auch auf der Suche nach benutzerdefinierten Schriftarten und einem Quadratischen Rahmen um die gedruckten Worte, als auch als word-wrapping. Hat jemand einen Vorschlag für den Platz eine Grenze?

    InformationsquelleAutor xstephen95x
Schreibe einen Kommentar