Dodawanie tekstu dynamicznego do obrazu

Tworzę witrynę internetową dla użytkowników, którzy mogą tworzyć niestandardowe logo. Do tego potrzebuję narzędzia do dodawania tekstu dynamicznego z pól tekstowych, które użytkownik wypełni, a tekst powinien pojawić się na wybranym obrazie. Czy jest jakiś sposób, na przykład na JavaScript, dzięki któremu mogę spełnić powyższy scenariusz? Byłbym wdzięczny za wszelkie sugestie, w jaki sposób mogę to zrobić.Dodawanie tekstu dynamicznego do obrazu

Moje HTML tak daleko jest:

<html> 
    <body> 
    <input type="text" id="submit"/> 
    <img src=<?php echo $image; ?> id="toChange" alt="pic" width="60" height="60" /> 
    </body>

i mój jQuery:

$('#submit').change(function() { 
    $('#toChange').text($('#submit').val()); 
});

ale nie byłem do tej pory sukces.

Źródło

2012-07-16 Dark Knight

Jeśli generujesz obraz za pomocą PHP, będziesz musiał przekazać wartości pola tekstowego skryptowi, a następnie ponownie załadować wygenerowany obraz. Możesz użyć wywołania AJAX, aby wysłać tekst i otrzymać nowy adres URL obrazu. – Alex

Masz na myśli, że chcesz, aby tekst pojawił się nad obrazem, czy też został zapisany jako plik z tym tekstem? JavaScript nie może zrobić tego drugiego - potrzebujesz czegoś takiego jak [PHP GD] (http://www.php.net/gd) – Utkanos

Ach, chcesz zrobić coś w stylu [** www.cooltext.com ** ] (http://www.cooltext.com). – arttronics

Można spróbować wykonać następujące czynności:

użycie HTML5 Canvas, aby wyrenderować obraz Przykład: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
Na szczycie renderowanego obrazu korzystać z HTML5 Canvas API wyciągnąć tekst, który ma wymaganą czcionki atrybuty Odniesienie: https://developer.mozilla.org/en/Drawing_text_using_a_canvas

Mam nadzieję, że będzie przydatny.

Źródło

2012-07-16 10:20:58 18bytes

Wszystkie zalety - ale OP chce zapisać plik obrazu z tekstem, jak sądzę. – Utkanos

@Utkanos i user1528490 Możesz zapisać konteksty Canvas jako plik obrazu. Przykład: http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/. Mam nadzieję, że to pomoże! – 18bytes

Informacje o zapisywaniu i pobieraniu obrazu jako obrazu, patrz: http://jsfiddle.net/softvar/5hnyf/ – Kurtis92

Dodawanie tekstu dynamicznego do obrazu

Odpowiedz

Powiązane problemy