Question

有各种jquery插件可将文本添加为图像上的叠加层。但我希望允许用户在图像上放置文本，为文本生效（如字体，大小，曲线），然后将其保存为图像。像http://ipiccy.com/之类的东西（不需要所有功能，但添加文字和文字效果）我使用的是Asp.Net mvc。请建议

Answer 1

您可以定位文本，一旦加载图像，即使是随机的，jQuery的position（）方法将为您提供所需的所有信息。然后你可以在容器中放入你想要的任何文本/效果。

<h1>Text Blocks Over Image, Updated</h1>

<figure>
  <img src="http://baconmockup.com/501/351" />
  <figcaption>
    <span>
      trdy
      <span class='spacer'></span>
      <br />
      <span class='spacer'></span>
      bacon ipsum dolor sit amet
    </span>
  </figcaption>
</figure>

<p>Modernized and improved from <a href="http://css-tricks.com/text-blocks-over-image/">http://css-tricks.com/text-blocks-over-image/</a>.</p>

<h3>Key Updates</h3>

<ul>
  <li>Positioning the <code>h2</code> by <code>bottom</code> pins the caption to the <em>bottom</em> of the image.</li>
  <li>Reset bg color declaration on spacer element.</li>
<!--   <li>Used <code>:before</code> and <code>:after</code> for line-break spacing.</li> -->
  <li>Switched to <a href="http://baconipsum.com/">http://baconipsum.com/</a> and <a href="http://baconmockup.com">http://baconmockup.com</a> for better BEO.</li>
  <li>Semantcized to figure/figcaption markup.</li>
</ul>

用于在图像上添加文本的Jquery插件

1 个答案: