Question

我是新人，所以我希望我在正确的地方问正确的问题。首先，我在网站上搜索找到了解决我问题的方法，但没有成功。因此，我决定请您介入并帮助我。从字面上看，我正在尝试将下拉菜单中的一些数据/图像粘贴到画布上。 main.html <主要>

... ... {{> selectValue}} 这是我尝试获取每个select的值的尝试，但这不起作用。 main.js Template.selectValue.events（{ “ change #dropdown”：函数（事件，模板）{ 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"]
  }
});

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

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

2 个答案: