Как можно динамично поместить различные шаблоны на изображения на веб-странице.

Вы можете использовать библиотеки ImageMagick, чтобы делать любую комбинацию наложений, которую пожелает ваше сердце и сердце ваших пользователей. Таким образом, вы не ограничены чем-то простым, чего можно добиться с помощью CSS.

Примеры ImageMagick

Самый простой способ сделать это с помощью Javascript - это, вероятно, создать маску изображения для каждой буквы и применить ее поверх шаблона. Под маской изображения я подразумеваю простое изображение, полностью черное (или белое, или как вам нравится) с «вырезанной» прозрачной частью в форме буквы. Вы можете просто наложить это на файл шаблона, чтобы получить желаемый эффект.

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

Вы можете динамически изменять img src и url фона div для переключения шаблонов и букв. Вы также можете динамически создавать новые div на основе пользовательского ввода.

Обратите внимание, что это не будет работать легко в IE6 из-за прозрачного PNG.

В качестве альтернативы вы можете динамически генерировать изображение на сервер, использующий что-то вроде gd , что будет немного сложнее, но в конечном итоге более гибким.

Чтобы пользователи могли вводить свои собственные имя вам понадобится текстовое поле. Вам также понадобится кнопка, которая запускает функцию Javascript, которая проверяет значение текстового поля и отображает изображения букв.

Вы можете использовать следующий код для создания букв. Вам понадобится текстовое поле с идентификатором 'textfield' и div для рендеринга результатов с идентификатором 'output', который, конечно, вы можете изменить. Я рекомендую использовать элемент select для хранения параметров шаблона (#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-спрайтам: http://css-tricks.com/css-sprites/ Вы можете добавить background-image: url (sprite.png); в приведенный выше фрагмент CSS. Вместо того, чтобы просто устанавливать backgroundImage с помощью 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');
}

Теперь единственное, что осталось - это преобразовать шрифты и импортировать их в вашу таблицу стилей.

Конечно, вы можете выбрать любой другой метод встраивания шрифтов. Вот статья о вариантах встраивания шрифтов , но быстрый Google тоже покажет вам эти варианты.

Если вам разрешено использовать что-то в серверной части, вот решение на Java. Вам просто понадобится шрифт (name.ttf), которым вы вводите буквы, но я предполагаю, что он у вас есть:

(это внутри метода 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();

Прочтите ссылку ниже, здесь вы найдете подробную информацию о динамическом загрузчике вместе с примером http://thecodecentral.com/2008/02/21/a-useful-javascript-image-loader

GDI + отлично работает в ASP.NET. (Раньше WPF использовался, но затем был сломан из-за пакета обновления. Не уверен, что он снова работает.)

Создание изображений на стороне сервера довольно просто - трюк заключается в их связывании с запросами на стороне клиента. Я использовал представление стека - моя статья здесь:

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

Даже на сервере это нетривиальная проблема, так как невозможно выполнить прямую 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);
}

}

А затем найдите схему именования, чтобы кэшировать их на диске после создания, поэтому вам нужно только отображать каждую комбинацию букв <-> один раз.

Как выполнить преобразование? Возможно, вы забыли связать таблицу стилей XSLT с XML-документом, используя:

<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>

в начале XML-документа. Подробнее здесь .

Лично я бы сделал все это во Flash, предоставив интерфейс с дополнительными шаблонами, например, с JSON. Но самые простые шаги, которые вы могли бы сделать, это

создать форму с вводом для имени и полем выбора для шаблонов

отобразить флэш-файл с параметрами 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);
                }
            }
        }

    }
}

Когда все будет в соответствии с пожеланиями пользователей, вы можете создать новый объект Bitmap из результата и отправить данные в сервер, который может записывать данные непосредственно в файл растрового изображения (также возможен jpeg).

Несколько вещей, которые могут немного увеличить продажи Flash:

• вы можете вращать текст
• использовать экзотические шрифты
• использовать различные узоры на букву
• масштабируют текст
• используют настраиваемые фильтры изображений
• перемещают в трехмерном пространстве (x, y, поворот перемещения z, перспектива)
• Сохраните результат как изображение