Vue项目引用smilesDrawer_smilesdrawer 生成图片的地址-CSDN博客

本文链接：https://blog.csdn.net/weixin_44117394/article/details/107917372

Q:
项目需要画图，使用smilesDrawer工具包。结合GitHub文档给出的例子，需要改一下，让Vue 引用外部js包。

SOL：
index.html 中添加

    <script src="https://unpkg.com/smiles-drawer@1.0.10/dist/smiles-drawer.min.js"></script>

最终index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>platform</title>
    <script src="https://unpkg.com/smiles-drawer@1.0.10/dist/smiles-drawer.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

smilesDrawer模块

<template>
  <div>
    <input id="example-input" name="example-input" />
    <canvas id="example-canvas" width="500" height="500" style="opacity: 0"></canvas>
  </div>
</template>



    <script>

export default {
  mounted() {
    this.getImage()
  },
  methods: {
    getImage() {
      let input = document.getElementById("example-input");
      let options = {};

      // Initialize the drawer to draw to canvas
      let smilesDrawer = new SmilesDrawer.Drawer(options);
      // Alternatively, initialize the SVG drawer:
      // let svgDrawer = new SmilesDrawer.SvgDrawer(options);

      input.addEventListener("input", function() {
        // Clean the input (remove unrecognized characters, such as spaces and tabs) and parse it
        SmilesDrawer.parse(input.value, function(tree) {
          // Draw to the canvas
          smilesDrawer.draw(tree, "example-canvas", "light", false);
          // Alternatively, draw to SVG:
          // svgDrawer.draw(tree, 'output-svg', 'dark', false);
        });
      });
    }
  }

}
    </script>