如何将文本转换为图像然后垂直旋转

发布于 2024-12-04 08:30:52 字数 187 浏览 2 评论 0原文

有人知道如何将文本转换为图像并垂直旋转它的最佳方法吗? 或者你有关于如何做到这一点的代码吗?

任何网络编程语言都可以(PHP、Javascript 等)。

我用 php 和 javascript 编写一个程序,其中我让人们在文本输入中输入他们的名字,它将被转换为图像,并且该图像将被旋转。

希望这些信息有帮助。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

别再吹冷风 2024-12-11 08:30:52

你熟悉PHP中的GD库吗?

GD 文档

Are you familiar with the GD Library in PHP?

GD Documentation

独自唱情﹋歌 2024-12-11 08:30:52

PHP 和 GD 库可以做到这一点。 imagettftext() 函数会将文本添加到图像中,并且 imagerotate() 函数可以将其旋转任意角度。

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.

妳是的陽光 2024-12-11 08:30:52

您可以在客户端使用 HTML5CSS3,当然还有 Javascript 来完成此操作。

  1. 您可以首先在 上绘制文本、图像、视频以及任何您想要的内容。
  2. 然后就可以使用这个apicanvas2image,把它变成数据 URL (base64)。
  3. a) 最后放置一个 并在其上应用一些CSS3
    <代码> -webkit-transform:rotateY(45deg); <-- 对于 Webkit 浏览器
    <代码> -moz-transform:rotateY(45deg); <-- 对于 Firefox
    <代码> -o-transform:rotateY(45deg); <-- 对于 Opera
    <代码> -ms-transform:rotateY(45deg); <--不确定是否存在
    变换:rotateY(45deg); <-- 原文
    b) 或者您可以在第 #2 步中的中旋转它如果你愿意的话。

MDN Canvas 教程上了解有关 标签的更多信息。
HTML5 和 Javascript 部分IE9 安全。 :D

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

千仐 2024-12-11 08:30:52

您可能想阅读我在 CodeProject 上的文章:网页中的垂直标签 - http://www.codeproject.com/KB/custom-controls/VerticalLabel.aspx

无论您在网页中需要它还是只是在位图对象中,您都可以在那里找到解决方案。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文