자바 스크립트를 사용하여 텍스트를 이미지로 변환

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

Amaan에 의해 제안 캔버스 접근 방식은 확실히 이미지를 클라이언트 측을 생성하는 현재의 접근 방식입니다.

이전에는 가장 일반적인 해결책은 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과 같이 웹 서버에 이미지를 생성하는 대신 웹 서버에 정적 파일을 추가하기 만하면됩니다.