开发者

How to convert a text into image and then rotate it vertically

Does someone know the best approach on how to convert a text into image and rotate it vertically? Or do you have a code on how to do that?

Any web programming language would do (PHP开发者_如何转开发, Javascript, etc..)

I writing a program in php and javascript wherein I let people type in their name in a text input and it will be converted into image, and that image will be rotated.

Hope this info helps.


Are you familiar with the GD Library in PHP?

GD Documentation


PHP with the GD library can do this. The imagettftext() function will add text to an image and imagerotate() function can rotate it by an arbitrary angle.


You can do it on the client side using HTML5, CSS3, and of course Javascript.

  1. You can first draw text, images, videos, anything you want on a <canvas>.
  2. Then you can use this api, canvas2image, and turn it into a dataurl (base64).
  3. a) Finally put it a <img> and apply some CSS3 on it:
     -webkit-transform:rotateY(45deg);  <-- For Webkit browsers
     -moz-transform:rotateY(45deg);  <-- For Firefox
     -o-transform:rotateY(45deg);  <-- For Opera
     -ms-transform:rotateY(45deg);  <--Not sure about this if this exists
     transform:rotateY(45deg);  <-- Original
    b) Or you can rotate it in the <canvas> in step #2 if you prefer.

Learn more about the <canvas> tag on MDN Canvas Tutorial.
The HTML5 and the Javascript part is IE9-safe. :D


You may want to read my article at CodeProject: Vertical Labels in Web Pages - http://www.codeproject.com/KB/custom-controls/VerticalLabel.aspx

Whatever you need it in web pages or just in a bitmap object, you'll find the solution there.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜