छवि

पर गतिशील पाठ जोड़ना मैं उपयोगकर्ताओं के लिए एक वेबसाइट बना रहा हूं जहां वे कस्टमाइज़ लोगो बना सकते हैं। इसके लिए मुझे टेक्स्ट बॉक्स से डायनामिक टेक्स्ट जोड़ने की सुविधा चाहिए, जिसे उपयोगकर्ता भर देगा और टेक्स्ट को चयनित छवि पर तब दिखाई देना चाहिए। क्या जावास्क्रिप्ट के लिए कोई रास्ता है, जिसके माध्यम से मैं उपर्युक्त परिदृश्य को पूरा कर सकता हूं? किसी भी सुझाव की सराहना करेंगे कि मैं यह कैसे कर सकता हूं।छवि

मेरे एचटीएमएल अब तक है:

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

और मेरे jQuery:

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

लेकिन मैं अब तक सफल नहीं किया गया है।

स्रोत

2012-07-16 Dark Knight

यदि आप PHP के साथ अपनी छवि उत्पन्न कर रहे हैं, तो आपको टेक्स्टबॉक्स मानों को स्क्रिप्ट में पास करना होगा और फिर जेनरेट की गई छवि को फिर से लोड करना होगा। आप पाठ भेजने के लिए एक AJAX कॉल का उपयोग कर सकते हैं और छवि के लिए एक नया यूआरएल वापस प्राप्त कर सकते हैं। – Alex

आपका मतलब है कि आप छवि पर टेक्स्ट दिखाना चाहते हैं, या वास्तव में उस पाठ के साथ फ़ाइल के रूप में सहेजा जा सकता है? जावास्क्रिप्ट उत्तरार्द्ध नहीं कर सकता - आपको कुछ [PHP जीडी] (http://www.php.net/gd) – Utkanos

आह की आवश्यकता होगी, आप कुछ ऐसा करना चाहते हैं [** www.cooltext.com ** ] (http://www.cooltext.com) तो। – arttronics

आप निम्न की कोशिश कर सकते हैं:

उपयोग HTML5 कैनवास अपनी छवि को प्रस्तुत करने के लिए उदाहरण: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
प्रदान की गई छवि HTML5 कैनवास एपीआई का उपयोग आवश्यक फॉन्ट के साथ पाठ आप चाहते हैं आकर्षित करने के लिए के शीर्ष पर विशेषताएं संदर्भ: https://developer.mozilla.org/en/Drawing_text_using_a_canvas

आशा है कि यह उपयोगी होगा।

स्रोत

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

सभी अच्छे अंक - लेकिन ओपी छवि फ़ाइल को उस पाठ के साथ सहेजना चाहता है, मुझे लगता है। – Utkanos

@Utkanos और user1528490 आप कैनवास संदर्भों को छवि फ़ाइल के रूप में सहेज सकते हैं। यहां उदाहरण: http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/। आशा करता हूँ की ये काम करेगा! – 18bytes

छवि के रूप में कैनवास को सहेजने और डाउनलोड करने के बारे में, यहां एक नज़र डालें: http://jsfiddle.net/softvar/5hnyf/ – Kurtis92

उत्तर

संबंधित मुद्दे