从 <select> 值获取数据并将其粘贴到 <canvas>

Question

我是新来的，所以我希望我在正确的地方提出正确的问题。首先我在网站上搜索了一些解决我的问题的方法，但我没有成功。所以更进一步，我决定请你介入并帮助我。从字面上看，我正在尝试将下拉菜单中的一些数据/图像粘贴到画布上。

ma​​in.html

    <main>
        <canvas class='background' width="400" height="200" style="border:1px solid #000000;"></canvas>
    ...
    ...
        {{>selectValue}}
      </main>

<template name='selectValue'>
  <td>
    <select id="dropdown">
      <option value='' disabled="disabled" selected="selected">Please Select</option>
      <option data-img-src='img/person.png'>Option 1</option>
      <option data-img-src='img/progress.png'>Option 2</option>
      <option data-img-src='img/success.png'>Option 3</option>
    </select>
  </td>
</template>

这是我尝试获取每个 select 的值，但它不起作用。 ma​​in.js

Template.selectValue.events({
  "change #dropdown": function (event, template) {
    var selectValue = template.$("#dropdown", '.background').val();

    console.log(selectValue);

  }
});

从好的方面来说，我在 console.log 中选择了其中一个选项，但我仍然没有在 CANVAS 中显示任何图像。我认为我在正确的轨道上......

Answer 1

看看这是不是你想要的

我按照我在评论中分享的示例进行操作。

let drop = document.getElementById('dropdown');
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');
let imageObj = new Image();

drop.addEventListener('change', function () {
  imageObj.src = this.options[this.selectedIndex].dataset.img;
  imageObj.onload = function() {
    context.drawImage(imageObj, 69, 50);
  };
});

select {
  display: block;
}

<select id="dropdown">
    <option value='' disabled="disabled" selected="selected">Please Select</option>
    <option data-img='https://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed2.jpg'>Option 1</option>
    <option data-img='https://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed1.jpg'>Option 2</option>
    <option data-img='https://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed3.jpg'>Option 3</option>
</select>
    
<canvas id="myCanvas" class='background' width="400" height="200" style="border:1px solid #000000;"></canvas>

Answer 2

ma​​in.html

 <main>
    {{>canvas}}
   ...
    {{>selectValue}}
  </main>

<template name='canvas'>
  <canvas id="myCanvas" class='background' width="400" height="200" style="border:1px solid #000000;"></canvas>
</template>

<template name='selectValue'>

  <select id="dropdown">
    <option value='' disabled="disabled" selected="selected">Please Select</option>
    {{#each categories}}
    <option value="{{this}}">{{this}}</option>
    {{/each}}
  </select>


</template>

ma​​in.js 然后在 JS 中你还必须添加这个

Template.selectValue.helpers({
  categories: function () {
    return ["Option 1", "Option 2", "Option 3"]
  }
});

我认为这是获取数据的正确方向，但我不确定如何在画布中显示它。