Импорт графики XPM в холст HTML5 - PullRequest
Новая
       12

Импорт графики XPM в холст HTML5

1 голос
/ 20 июня 2011

Возможно ли это?

Я пытаюсь перенести демонстрационную игру старого профессора в формат для игры в Интернете, и он настроил всю графику в формате XPM .

Есть ли способ загрузить файлы XPM непосредственно в холст HTML5?Я мог бы, вероятно, обойтись загрузкой их в редактор изображений и преобразованием ... но я бы предпочел остаться настолько верным исходному источнику, насколько это возможно.

Ответы [ 3 ]

1 голос
/ 20 июня 2011

Вы, вероятно, могли бы написать какой-то синтаксический анализатор для XPM на JavaScript и визуализировать пиксели холста, используя подобный подход к этому вопросу , однако я думаю, что было бы более эффективно использовать что-то вроде ImageMagick и делают однократное преобразование : 

mogrify -format png *.xpm
1 голос
/ 29 августа 2012

Я сделал небольшой плагин для этого, есть много чего улучшить, но, возможно, это поможет вам ... вы можете увидеть демо здесь: http://cortezcristian.com.ar/xpm2canvas/

Вы также можете поиграть с демо в этой скрипке: http://jsfiddle.net/crisboot/aXt3G/ 

<script src="./js/libs/jquery-1.7.1.min.js"></script>
  <script src="./js/jquery.xpm2canvas.js"></script>
  <script>
        var pseudoXMP = [
            /* <Values> */
            /* <width/cols> <height/rows> <colors> <char on pixel>*/
            "40 40 6 1",
            /* <Colors> */
            "     c none",
            ".    c #ffffff",
            "X    c #dadab6",
            "o    c #6c91b6",
            "O    c #476c6c",
            "+    c #000000",
            /* <Pixels> */
            "                                        ",
            "                                        ",
            "                                        ",
            "        .      .X..XX.XX      X         ",
            "        ..   .....X.XXXXXX   XX         ",
            "        ... ....X..XX.XXXXX XXX         ",
            "   ..   ..........X.XXXXXXXXXXX   XX    ",
            "   .... ........X..XX.XXXXXXXXX XXXX    ",
            "   .... ..........X.XXXXXXXXXXX XXXX    ",
            "   ooOOO..ooooooOooOOoOOOOOOOXX+++OO++  ",
            "   ooOOO..ooooooooOoOOOOOOOOOXX+++OO++  ",
            "   ....O..ooooooOooOOoOOOOOOOXX+XXXX++  ",
            "   ....O..ooooooooOoOOOOOOOOOXX+XXXX++  ",
            "   ..OOO..ooooooOooOOoOOOOOOOXX+++XX++  ",
            "    ++++..ooooooooOoOOOOOOOOOXX+++ +++  ",
            "     +++..ooooooOooOOoOOOOOOOXX+++  +   ",
            "      ++..ooooooooOoOOOOOOOOOXX+++      ",
            "        ..ooooooOooOOoOOOOOOOXX+++      ",
            "        ..ooooooooOoOOOOOOOOOXX+++      ",
            "        ..ooooooOooOOoOOOOOOOXX+++      ",
            "        ..ooooooooOoOOOOOOOOOXX+++      ",
            "         ..oooooOooOOoOOOOOOXX+++       ",
            "         ..oooooooOoOOOOOOOOXX+++       ",
            "          ..ooooOooOOoOOOOOXX+++        ",
            "          ..ooooooOoOOOOOOOXX++++       ",
            "        ..o..oooOooOOoOOOOXX+XX+++      ",
            "       ...o..oooooOoOOOOOXX++XXX++      ",
            "      ....OO..ooOooOOoOOXX+++XXXX++     ",
            "     ...oo..+..oooOoOOOXX++XXooXXX++    ",
            "    ...ooo..++..OooOOoXX+++XXooOXXX+    ",
            "   ..oooOOXX+++....XXXX++++XXOOoOOXX+   ",
            "   ..oooOOXX+++ ...XXX+++++XXOOooOXX++  ",
            "   ..oooOXXX+++  ..XX+++  +XXOOooOXX++  ",
            "   .....XXX++++             XXXXXXX++   ",
            "    ....XX++++              XXXXXXX+    ",
            "     ...XX+++                XXXXX++    ",
            "                                        ",
            "                                        ",
            "                                        ",
            "                                        "];
        $(document).ready(function(){
            $('#xmp2canvas').xpm2canvas({xpm:pseudoXMP});
        });
  </script>
0 голосов
/ 20 июня 2011

IIRC, контекст рендеринга для элемента canvas в таком контексте основан на манипулировании атрибутом src встроенного тега img. Таким образом, предположительно файлы XPM могут работать только в том случае, если соответствующий браузер их поддерживает.

Лучший способ проверить это - проверить это. Принятый ответ на этот вопрос содержит код, который должен помочь:

импорт изображения на холст html5

...