從中獲取數據 <select>值並將其粘貼<canvas>

Question

我是新人，所以我希望我在正確的地方問正確的問題。 首先，我在網站上搜索以找到解決問題的方法，但沒有成功。 因此，我決定請您介入並幫助我。 從字面上看，我正在嘗試將下拉菜單中的一些數據/圖像粘貼到畫布上。

main.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的值的嘗試，但這不起作用。 main.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

main.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>

main.js然后在JS中您還必須添加

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

我認為這是獲取數據的正確方向，但是我不確定如何在畫布上顯示它。