当前位置：文江博客话题详情

如何在网页中的图像上动态放置不同的图案。

发布于 2024-08-10 03:16:01 字数 670 浏览 7 评论 0原文

我有

一堆织物图案（简单的 jpg 文件）
字母表中每个字母的图像（空白白色背景）

我本质上想要一个与此类似的页面： http://www.craftcuts.com/hand-painted- wood-letters-single-patterns.html

但我希望用户能够：

输入名称
选择一种模式（其中一个 jpg 文件）

，然后将其作为静态页面它以该模式显示该名称。

显然，我可以为每个字母组合创建单独的 jpg（现在我为每个带有白色背景颜色的字母创建一个 jpg）和图案，但我想找出是否有一种更优雅的编码方式，以便动态地将其编码将一张图像复制到另一张图像的字母上。

编辑：在我的第一篇文章中，我认为这必须是前端的东西（javascript），但如果它使它变得更容易（正如一些人问什么是后端）），我的后端是一个 asp.net-mvc，所以如果有某种解决方案可以在服务器端构建它并发送到客户端，我也非常乐意使用它。

原文

分享到QQ

分享到微博

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

发布评论

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

万人眼中万个我 2024-08-17 03:16:01

您可以使用 CSS 将背景图像应用到图像，然后使用大量透明 .png 图像作为字母。

我模拟了它：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style type="text/css">

 img.leaves
 {
    background:url("leaves.png");
 }
 img.lights
 {
    background:url("lights.png");
 }

</style>

<script type="text/javascript">

function makeText()
{
    var text = document.getElementById('text').value.toUpperCase();
    var pattern = document.getElementById('pattern').value;

    for(var i=0; i<text.length; i++)
    {
        var img = document.createElement('img');
        img.src=text[i]+'.png';
        img.className=pattern;
        document.getElementById('textArea').appendChild(img);
    }

    return false;
}

</script>

</head>

<body>

<form onsubmit="return makeText();">
<p><label for="text">Enter your text</label> <input type="text" name="text" id="text" size="20"></p>
<p><label for="pattern">Choose a pattern</label> <select id="pattern"><option value="leaves">Leaves</option><option value="lights">Lights</option></select></p>
<p><input type="submit" value="Make!"></p>
</form>

<div id="textArea"></div>

</body>
</html>

您也可以查看它的实际效果。

替代文本 http://www.subdimension.co.uk/files/ 1/SO/A.png <这是字母切口之一（很难看到！）

替代文本 http ://www.subdimension.co.uk/files/1/SO/leaves.png 和背景图案之一。

我对 G 感到厌倦，所以你只能写包含字母 ag 的单词，它也有点懒，因为它只写大写并且只有 2 种模式，但希望它足以给你一个想法

You can apply background images to images using CSS, then use a load of transparent .png images for the letters.

I mocked it up:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style type="text/css">

 img.leaves
 {
    background:url("leaves.png");
 }
 img.lights
 {
    background:url("lights.png");
 }

</style>

<script type="text/javascript">

function makeText()
{
    var text = document.getElementById('text').value.toUpperCase();
    var pattern = document.getElementById('pattern').value;

    for(var i=0; i<text.length; i++)
    {
        var img = document.createElement('img');
        img.src=text[i]+'.png';
        img.className=pattern;
        document.getElementById('textArea').appendChild(img);
    }

    return false;
}

</script>

</head>

<body>

<form onsubmit="return makeText();">
<p><label for="text">Enter your text</label> <input type="text" name="text" id="text" size="20"></p>
<p><label for="pattern">Choose a pattern</label> <select id="pattern"><option value="leaves">Leaves</option><option value="lights">Lights</option></select></p>
<p><input type="submit" value="Make!"></p>
</form>

<div id="textArea"></div>

</body>
</html>

and you can also see it in action.

alt text http://www.subdimension.co.uk/files/1/SO/A.png < this is one of the letter cutouts (difficult to see!)

alt text http://www.subdimension.co.uk/files/1/SO/leaves.png and one of the background patterns.

I got bored at G, so you can only write words that contain the letters a-g, it's also a little lazy in that it only does upper case and there are only 2 patterns but hopefully it should be enough to give you an idea

回复收藏 0 原文

饮惑 2024-08-17 03:16:01

您可以使用 ImageMagick 库来制作您和您的用户想要的任意叠加组合。这样，您就不再局限于使用 CSS 可以实现的简单任务。

ImageMagick 示例

回复收藏 0 原文

眼波传意 2024-08-17 03:16:01

通过 Javascript 实现这一点的最简单方法可能是为每个字母提供一个图像蒙版，并将其应用到图案之上。我所说的图像蒙版是指一个完全黑色（或白色，或任何你喜欢的东西）的简单图像，带有字母形状的“切出”透明部分。您只需将其覆盖在模式文件上即可获得所需的效果。

<div style="background: url(pattern.jpg)">
    <img src="letter_a.png" />
</div>

您可以动态更改img src和div背景url来切换图案和字母。您还可以根据用户输入动态创建新的 div。

请注意，由于 PNG 是透明的，这在 IE6 中不容易工作。

或者，您可以使用诸如 gd 之类的东西在服务器上动态生成图像，这会更复杂一些，但最终更灵活。

The easiest way to do so via Javascript is probably to have an image mask of each letter and apply it on top of a pattern. By image mask I mean a simple image completely black (or white, or whatever you prefer) with a "cut out" transparent part in the shape of the letter. You can simply overlay that over the pattern file to get the wanted effect.

<div style="background: url(pattern.jpg)">
    <img src="letter_a.png" />
</div>

You can dynamically change the img src and div background url to switch patterns and letters. You can also dynamically create new divs based on user input.

Note that this won't work easily in IE6 due to the transparent PNG.

Alternatively, you could generate the image dynamically on the server using something like gd, which would be a little more involved, but ultimately more flexible.

回复收藏 0 原文

[旋木] 2024-08-17 03:16:01

为了让用户能够输入自己的姓名，您需要一个文本字段。您还需要一个按钮来触发 Javascript 函数，该函数检查文本字段的值并呈现字母图像。

您可以使用以下代码来创建字母。您将需要一个 id 为“textfield”的文本字段和一个 div 来呈现 id 为“output”的结果，当然您可以更改它。我建议使用选择元素来存储图案选项（本例中为#patternChooser）

function renderName()
{
    // Get the name to be rendered and the chosen pattern
    var text = document.getElementById('textfield').value;
    var pattern = document.getElementById('patternChooser').value;

    // Iterate over the name and create an element for each letter
    for(i = 0; i < text.length; i++)
    {
        var letter = document.createElement('div');
        letter.style.backgroundImage = 'url(' + pattern + '_' + text[i] + ')';

        document.getElementById('output').appendChild(letter);
    }
}

您可以使用以下 CSS 对字母应用一些定位（调整图像的宽度和高度）：

#output div
{
    margin-left: 10px;
    width: 50px;
    height: 100px;
    float: left;
}

您需要命名您的像这样的图像：flowerpattern_a.png、brickpattern_j.png 等。

如果您希望字母实时显示，您可以使用 Javascript 的 onkeyup() 触发一个函数，检查文本字段值的最后一个字符并为其创建一个元素。

精灵

您还可以使用精灵来提高性能。将字母的所有图像放入一张图像中。您将此图像设置为每个字母的背景。
快速阅读 CSS sprites：http://css-tricks.com/css-sprites/
您可以将 background-image: url(sprite.png); 添加到上面的 CSS 代码段中。
您不仅需要使用 Javascript 设置背景图像，还需要设置字母的背景位置 (letter.style.background-position = '100px 200px')

字体嵌入

如果您有要使用的字体：有许多字体嵌入选项，例如 Typeface 和 Cufon。我发现使用起来最愉快的是使用font-face。它速度很快，并且文本的行为与任何其他文本一样。

如果您拥有 .TTF Truetype 字体，则需要将该字体转换为 .EOT 以便与 Internet Explorer 一起使用。您还可以添加 SVG 字体以实现完整的浏览器覆盖。它实际上非常简单：您只需将以下代码片段添加到样式表的顶部，如下所示：

@font-face {
  font-family: 'GothicCustom';
    src: url("LeagueGothic.eot");
    src: local('League Gothic'),
       url("LeagueGothic.svg#lg") format('svg'),
       url("LeagueGothic.otf") format('opentype');
}

这种技术的优点是易于使用，并且您可以完全控制呈现的文本，就像网站上的任何其他文本一样。您可以设置字体大小、字母间距等。这是一个很好的了解 font-face 字体嵌入。
您可以使用 Microsoft WEFT 或 TTF2EOT 创建 .EOT 字体。

例如，您的代码可能如下所示。

Javascript

function renderName()
{
    // Get the name to be rendered and the chosen pattern
    var text = document.getElementById('textfield').value;
    var pattern = document.getElementById('patternChooser').value;

    // Render the text with a class
    for(i = 0; i < text.length; i++)
    {
        var output = document.getElementById('output');

        output.style.fontFamily = pattern;
        output.innerHTML = text;
    }
}

HTML

<form>
    <input id="textfield" type="text" />

    <select id="patternChooser">
        <option>Flowers</option>
        <option>Brick</option>
        <option>Decorative</option>
    </select>

    <input type="button" onclick="renderName()" />
</form>

<div id="output"></div>

CSS

@font-face {
  font-family: 'Decorative';
    src: url("decorative.eot");
    src: local('Decorative'),
       url("Decorative.svg#lg") format('svg'),
       url("Decorative.otf") format('opentype');
}

现在唯一可以剩下的就是转换字体并将它们导入样式表中。

当然，您可以选择使用任何其他字体嵌入方法。这是一篇关于字体嵌入选项的文章但是快速谷歌也会向您显示选项。

For users to be able to type in their own name you'll need a text field. You'll also need a button that fires a Javascript function that checks the value of the text field and renders the letter images.

You can use the following code to create the letters. You will need a textfield with the id 'textfield' and a div to render the results in with the id 'output', which ofcourse you can change. I recommend using a select element to store the pattern options (#patternChooser in this example)

function renderName()
{
    // Get the name to be rendered and the chosen pattern
    var text = document.getElementById('textfield').value;
    var pattern = document.getElementById('patternChooser').value;

    // Iterate over the name and create an element for each letter
    for(i = 0; i < text.length; i++)
    {
        var letter = document.createElement('div');
        letter.style.backgroundImage = 'url(' + pattern + '_' + text[i] + ')';

        document.getElementById('output').appendChild(letter);
    }
}

You can use the following CSS to apply some positioning to the letters (adjust the with and height to that of your images):

#output div
{
    margin-left: 10px;
    width: 50px;
    height: 100px;
    float: left;
}

You will need to name your images like this: flowerpattern_a.png, brickpattern_j.png, etc.

If you want the letters to appear real time you can use Javascript's onkeyup() to fire a function that checks the last character of the text field's value and creates an element for it.

Sprites

You can also use a sprite to increase performance. Put all the images for the letters into one image. You set this image as a background for every letter.
Quick read on CSS sprites: http://css-tricks.com/css-sprites/
You can add background-image: url(sprite.png); to the CSS snippet above.
Instead of just setting a backgroundImage with Javascript, you will need to set the background position of the letter (letter.style.background-position = '100px 200px')

Font embedding

If you got fonts to use: there are many font embedding options like Typeface and Cufon. The one I find most pleasant to work with is the use of font-face. It is fast and the text will behave like any other text.

If you got your .TTF Truetype font, you'll need to convert the font to .EOT for use with Internet Explorer. You could also add SVG fonts for full browser coverage. It's actually very easy: You just add the following snippet to the top of your stylesheet like this:

@font-face {
  font-family: 'GothicCustom';
    src: url("LeagueGothic.eot");
    src: local('League Gothic'),
       url("LeagueGothic.svg#lg") format('svg'),
       url("LeagueGothic.otf") format('opentype');
}

The advantage of this technique is that it's easy to use and you got full controll over the rendered text, like any other text on your website. You can set the font-size, letter-spacing etc. Here's a good read about font-face font embedding.
You can use Microsoft WEFT or TTF2EOT to create .EOT fonts.

For example, your code could look like this.

Javascript

function renderName()
{
    // Get the name to be rendered and the chosen pattern
    var text = document.getElementById('textfield').value;
    var pattern = document.getElementById('patternChooser').value;

    // Render the text with a class
    for(i = 0; i < text.length; i++)
    {
        var output = document.getElementById('output');

        output.style.fontFamily = pattern;
        output.innerHTML = text;
    }
}

HTML

<form>
    <input id="textfield" type="text" />

    <select id="patternChooser">
        <option>Flowers</option>
        <option>Brick</option>
        <option>Decorative</option>
    </select>

    <input type="button" onclick="renderName()" />
</form>

<div id="output"></div>

CSS

@font-face {
  font-family: 'Decorative';
    src: url("decorative.eot");
    src: local('Decorative'),
       url("Decorative.svg#lg") format('svg'),
       url("Decorative.otf") format('opentype');
}

Now the only thing that is left is converting the fonts and import them in your stylesheet.

Ofcourse you can choose to go with any other font-embedding method. Here's an article about font-embedding options but a quick Google will show you the options as well.

回复收藏 0 原文

彩虹直至黑白 2024-08-17 03:16:01

如果你被允许在后端使用一些东西，这里有一个java解决方案。您只需要用于输入字母的字体（name.ttf），但我假设您已经拥有它：（

这是在 servlet doGet 方法内）

String text = "A letter, or any text here";
File texture = new File(patternTexturePath);

File fontFile = new File(filePath);
Font font = Font.createFont(Font.TRUETYPE_FONT, fontFile);
GraphicsEnvironment ge = GraphicsEnvironment.getLocalGraphicsEnvironment();
ge.registerFont(font);


BufferedImage buffer = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);

g2 = buffer.createGraphics();
g2.clearRect(0, 0, width, height);
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                    RenderingHints.VALUE_ANTIALIAS_ON);
g2.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING,
                    RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
g2.setRenderingHint(RenderingHints.KEY_RENDERING,
                      RenderingHints.VALUE_RENDER_QUALITY);

FontRenderContext fc = g2.getFontRenderContext();
Rectangle2D bounds = font.getStringBounds(text, fc);

AttributedString attrStr = new AttributedString(text);
Rectangle r = new Rectangle(0, 0, width, height);
attrStr.addAttribute(TextAttribute.FOREGROUND, new TexturePaint(ImageIO.read(texture), r));
attrStr.addAttribute(TextAttribute.FONT, font);
g2.drawString(attrStr.getIterator(), 0, (int) -bounds.getY());

response.setContentType("image/png");
ImageIO.write(buffer, "png", response.getOutputStream());
response.getOutputStream().close();

If you are allowed to use something in the back-end, here is a java solution. You will just need the font (name.ttf) with which you type the letters, but I assume you have it:

(this is inside a servlet doGet method)

String text = "A letter, or any text here";
File texture = new File(patternTexturePath);

File fontFile = new File(filePath);
Font font = Font.createFont(Font.TRUETYPE_FONT, fontFile);
GraphicsEnvironment ge = GraphicsEnvironment.getLocalGraphicsEnvironment();
ge.registerFont(font);


BufferedImage buffer = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);

g2 = buffer.createGraphics();
g2.clearRect(0, 0, width, height);
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                    RenderingHints.VALUE_ANTIALIAS_ON);
g2.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING,
                    RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
g2.setRenderingHint(RenderingHints.KEY_RENDERING,
                      RenderingHints.VALUE_RENDER_QUALITY);

FontRenderContext fc = g2.getFontRenderContext();
Rectangle2D bounds = font.getStringBounds(text, fc);

AttributedString attrStr = new AttributedString(text);
Rectangle r = new Rectangle(0, 0, width, height);
attrStr.addAttribute(TextAttribute.FOREGROUND, new TexturePaint(ImageIO.read(texture), r));
attrStr.addAttribute(TextAttribute.FONT, font);
g2.drawString(attrStr.getIterator(), 0, (int) -bounds.getY());

response.setContentType("image/png");
ImageIO.write(buffer, "png", response.getOutputStream());
response.getOutputStream().close();

回复收藏 0 原文

知足的幸福 2024-08-17 03:16:01

即使在服务器上，这也不是一个小问题，因为不可能使用颜色遮罩直接进行 Fill()，而这本质上正是您所需要的。

如果字母图像非白色，我会更快地循环现有像素，进行查找并将图案像素写入结果图像：

Graphics g = Graphics.FromImage(letterImg);
Brush brush = new System.Drawing.TextureBrush(patternImg);
for (int x=0;i<letterImg.Width;i++)
  for (int y=0;y<letterImg.Height;y++)
{
    Color mask = img.GetPixel(x,y);
    //Color pattern = patternImg.GetPixel(x % patternImg.Width, y % patternImg.Height);
    if (mask != Color.White)
{   
     g.FillRectagle(brush,x,y,1,1);
}

}

然后找到一个命名方案来在创建后将它们缓存在磁盘上，这样您只需要渲染每个图案→字母组合一次。

Even on the server this is not a trivial issue, as it is not possible to do a direct Fill() using a color mask, which is esentially what you need.

I would sooner loop over the existing pixels, do a lookup and write the pattern pixel to the resulting image if the letter image is non-white:

Graphics g = Graphics.FromImage(letterImg);
Brush brush = new System.Drawing.TextureBrush(patternImg);
for (int x=0;i<letterImg.Width;i++)
  for (int y=0;y<letterImg.Height;y++)
{
    Color mask = img.GetPixel(x,y);
    //Color pattern = patternImg.GetPixel(x % patternImg.Width, y % patternImg.Height);
    if (mask != Color.White)
{   
     g.FillRectagle(brush,x,y,1,1);
}

}

And then find a naming scheme to cache these on the disk after creation so you only need to render each pattern<->letter combination once.

回复收藏 0 原文

手长情犹 2024-08-17 03:16:01

GDI+ 在 ASP.NET 下运行良好。（WPF 曾经是这样，但后来被一个服务包破坏了。不确定现在是否可以再次工作）。

在服务器端构建图像非常简单 - 技巧是将它们链接到客户端请求。我使用了堆栈表示 - 我的文章在这里：

http://www.hackification.com/2008/10/29/stack-based-processing-part-2/

回复收藏 0 原文

楠木可依 2024-08-17 03:16:01

在与 OO（海报）确认后，我想将 Flash 加入其中。

Flash 的优势在于它具有非常好的抗锯齿功能和出色的排版支持（尤其是自 CS4 以来）。您可以选择在 Flash 中直接键入图案字母，或者仅让 swf 根据指定名称和图案的参数呈现结果。

就我个人而言，我会在 Flash 中制作整个内容，为接口提供可选模式（例如 JSON）。但您可以采取的最基本步骤是

创建一个表单，其中包含名称输入和模式选择框

显示 Flash 文件以及参数patterntype.swf ?name=flash&pattern=disco.png

基本概念是将文本设置为图案的掩码。
我在闪存中做了一个快速测试，以测试平铺图案的性能（以及它是否真的有效）。

package {

    import flash.display.MovieClip;
    import flash.display.Loader;
    import flash.net.URLRequest;
    import flash.events.Event;
    import flash.display.Sprite;
    import flash.display.Bitmap;
    import flash.display.BitmapData;


    public class PatternType extends MovieClip {
        /* library element, use the textfield to change the font */
        public var nameDisplay:NameDisplay;

        private var loader:Loader;

            /* parameters, you can pass these as request parameters, or make a javascript call to get/set them */
        private var pattern:String = "pattern.png"; 
        private var nameString:String = "Heidi Klum";
        private var container:MovieClip;


        public function PatternType() {
            container = new MovieClip();
            addChild(container);

            nameDisplay = new NameDisplay();
            nameDisplay.txt.text = nameString;
            nameDisplay.cacheAsBitmap = true; //mask wont work without this.
            container.addChild(nameDisplay)

            container.mask = nameDisplay;

            loader = new Loader();
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, handlePatternLoaded);
            loader.load(new URLRequest(pattern));
        }


        private function handlePatternLoaded(e:Event) {
            trace("complete");
            var bmp:Bitmap = e.target.content as Bitmap;

            var rows:int = Math.ceil(stage.stageHeight / bmp.height);
            var cols:int = Math.ceil(stage.stageWidth / bmp.width);

            //tile the texture
            for(var i:int = 0; i < cols; i++) {
                for(var j:Number = 0; j < rows; j++) {
                    var b:Bitmap = new Bitmap(bmp.bitmapData.clone());
                    b.x = i * bmp.width;
                    b.y = j * bmp.height;
                    container.addChild(b);
                }
            }
        }

    }
}

当一切都符合用户意愿时，您可以从结果创建一个新的位图对象并将数据发送到服务器，该服务器可以将数据直接写入位图文件（也可以是 jpeg）。

有一些东西可以让 Flash 卖得更多：

您可以旋转文本
使用异国情调的字体
每个字母使用不同的图案
缩放文本
使用定制的图像过滤器
在 3D 空间中移动（x,y,z 平移旋转，透视）
保存结果作为图像

After confirming with OO (the poster) I wanted to throw Flash in the mix.

Flash has the advantage that it has really nice anti-aliasing and awesome typography support (especially since CS4). You could choose to have the entire interface in Flash where you type the patterned letters directly or just have the swf render the result according to parameters specifying the name and the pattern.

Personally I would make the whole thing in Flash, supplying the interface with the optional patterns with for instance JSON. But the most basic steps you could take are

create a form with input for the name and a select box for the patterns

display the flash file with parameters patterntype.swf?name=flash&pattern=disco.png

The basic concept is having the Text set as the mask for the pattern.
I did a quick test in flash to test the performance of tiling the pattern (and if it would actually work)

package {

    import flash.display.MovieClip;
    import flash.display.Loader;
    import flash.net.URLRequest;
    import flash.events.Event;
    import flash.display.Sprite;
    import flash.display.Bitmap;
    import flash.display.BitmapData;


    public class PatternType extends MovieClip {
        /* library element, use the textfield to change the font */
        public var nameDisplay:NameDisplay;

        private var loader:Loader;

            /* parameters, you can pass these as request parameters, or make a javascript call to get/set them */
        private var pattern:String = "pattern.png"; 
        private var nameString:String = "Heidi Klum";
        private var container:MovieClip;


        public function PatternType() {
            container = new MovieClip();
            addChild(container);

            nameDisplay = new NameDisplay();
            nameDisplay.txt.text = nameString;
            nameDisplay.cacheAsBitmap = true; //mask wont work without this.
            container.addChild(nameDisplay)

            container.mask = nameDisplay;

            loader = new Loader();
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, handlePatternLoaded);
            loader.load(new URLRequest(pattern));
        }


        private function handlePatternLoaded(e:Event) {
            trace("complete");
            var bmp:Bitmap = e.target.content as Bitmap;

            var rows:int = Math.ceil(stage.stageHeight / bmp.height);
            var cols:int = Math.ceil(stage.stageWidth / bmp.width);

            //tile the texture
            for(var i:int = 0; i < cols; i++) {
                for(var j:Number = 0; j < rows; j++) {
                    var b:Bitmap = new Bitmap(bmp.bitmapData.clone());
                    b.x = i * bmp.width;
                    b.y = j * bmp.height;
                    container.addChild(b);
                }
            }
        }

    }
}

When everything is to the users wishes, you can create a new Bitmap object from the result and send the data to the server which can write the data directly to a bitmap file (jpeg is also possible).

A few things that could sell Flash a bit more: