将 XPM 图形导入 HTML5 画布

Question

这可能吗？

我正在尝试将一位老教授的演示游戏移植为可在网络上玩的格式以供娱乐，并且他已在 XPM 格式。

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

Answer 1

您可能可以在 JavaScript 中为 XPM 编写某种解析器，并使用 对这个问题的类似方法，但是我认为使用类似 ImageMagick 和 做一个关闭转换：

mogrify -format png *.xpm

Answer 2

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

Answer 3

IIRC，此类上下文中 canvas 元素的渲染上下文依赖于操作嵌入 img 标记的 src 属性。因此，大概只有当相关浏览器支持 XPM 文件时，它们才有可能工作。

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

在画布上导入图像 html5