जावास्क्रिप्ट

Question

का उपयोग कर टेक्स्ट को छवि में कनवर्ट करें क्या कोई तरीका है कि मैं इनपुट टेक्स्ट को छवि में परिवर्तित कर सकता हूं। मैं वास्तव में क्या करने की कोशिश कर रहा हूं टेक्स्ट टेक्स्ट में कुछ टेक्स्ट टाइप करें और इसे div पर प्रदर्शित करें। जब मैं बटन पर क्लिक करता हूं तो div को कॉपी किए गए पाठ को छवि में बदला जाना चाहिए। Any1 इस बारे में कुछ भी पता है ?? अग्रिम में धन्यवाद!

Answer 1

आप इसे छुपा कैनवास तत्व का उपयोग करके और toDataURL का उपयोग करके एक छवि में परिवर्तित कर सकते हैं। आपका कोड कुछ इस तरह दिखेगा:

var tCtx = document.getElementById('textCanvas').getContext('2d'), //Hidden canvas 
    imageElem = document.getElementById('image'); //Image element 
// Text input element 
document.getElementById('textInput').addEventListener('keyup', function(){ 
    tCtx.canvas.width = tCtx.measureText(this.value).width; 
    tCtx.fillText(this.value, 0, 10); 
    imageElem.src = tCtx.canvas.toDataURL(); 
    console.log(imageElem.src); 
}, false); 
​ 

Demo

Answer 2

आप अपने सर्वर साइड पर ImageMagick उपयोग करने की आवश्यकता है। आप किस तरह के ढांचे का उपयोग करते हैं, इस पर निर्भर करते हुए, आपको कुछ अच्छी शैल स्क्रिप्ट लिखनी पड़ सकती है।

या

यह तो आपको देखना कर सकते हैं:

http://www.blitline.com/docs/functions

Answer 3

कैनवास दृष्टिकोण अमान ने सुझाव दिया निश्चित रूप से छवियों क्लाइंट साइड पैदा करने के लिए आज के दृष्टिकोण है।

अतीत में, सबसे आम समाधान Cufon जैसी लाइब्रेरी का उपयोग करना था। Cufon wiki page on its usage से इस स्निपेट आता है:

<script type="text/javascript"> 
    Cufon.replace('h1'); // Works without a selector engine 
    Cufon.replace('#sub1'); // Requires a selector engine for IE 6-7, see above 
</script> 

Cufon सामने फ़ॉन्ट का क्लाइंट-साइड संस्करण उत्पन्न करता है। इसका अर्थ है कि यह वेब सर्वर पर छवियों को उत्पन्न करने के बजाय, आपके वेब सर्वर पर स्थिर फाइलें जोड़ता है (जैसे ImageMagick)।