将 XPM 图形导入 HTML5 画布答案

【问题标题】：Importing XPM graphics into an HTML5 canvas将 XPM 图形导入 HTML5 画布
【发布时间】：2011-09-18 16:27:27
【问题描述】：

这可能吗？

我正在尝试将一位老教授的演示游戏移植到网络可玩的格式中以获得乐趣，他已将所有图形设置为 XPM 格式。

有没有办法将 XPM 文件直接加载到 HTML5 画布中？我可能可以将它们加载到图像编辑器中并进行转换……但我宁愿尽可能忠实于原始来源。

【问题讨论】：

标签： html canvas x11

【解决方案1】：

我为此做了一个小插件，还有很多需要改进的地方，但也许它可以帮助你...你可以在这里查看演示：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>

【讨论】：

【解决方案2】：

您可能可以在 JavaScript 中为 XPM 编写某种解析器，并使用 similar approach to this question 渲染画布像素，但我认为使用 ImageMagick 和 do a one off conversion 之类的东西会更有效：

mogrify -format png *.xpm

【讨论】：

【解决方案3】：

IIRC，canvas 元素在这种上下文中的呈现上下文依赖于操作嵌入式 img 标记的 src 属性。因此，XPM 文件大概只有在相关浏览器支持的情况下才有可能工作。

检查这一点的最佳方法是对其进行测试。这个问题的公认答案包含一些应该有帮助的代码：

importing image on canvas html5

【讨论】：