如何实现下拉选择切换Canvas图片并支持拖入图片与绘制功能

• 核心错误是你未使用<canvas>元素：当前.canvas-container容器内放置的是普通<img>标签，仅支持渲染静态图片，本身不具备绘制、接收拖拽内容的能力，你的绘制逻辑自然无法生效。
• 图片切换逻辑不符合Canvas使用规则：你直接修改<img>的src属性，没有将加载完成的图片绘制到画布上的流程。
• 缺少拖拽事件处理逻辑：没有为目标画布配置拖拽进入、放置的相关事件监听，可拖拽小图无法被识别并插入到目标区域。

将展示区域替换为真实Canvas元素，下拉切换时将选中的图片绘制到Canvas上，同时补充拖拽事件监听逻辑即可。

完整可运行代码 #

<!-- 可拖拽的小图片 -->
<img id="dragImg" draggable="true" src="小图片URL" crossorigin="anonymous">

<select name="map" id="map" onchange="setImage(this);" class="control control-lg">
  <optgroup label="First">
    <option value="切换图片1URL">Option 1</option>
    <option value="切换图片2URL">Option 2</option>
  </optgroup>
</select>

<div class="canvas-container">
  <!-- 替换img为canvas元素 -->
  <canvas id="drawCanvas"></canvas>
</div>

<script>
const canvas = document.getElementById('drawCanvas');
const ctx = canvas.getContext('2d');
let currentBaseImg = null;

// 下拉切换图片逻辑
function setImage(select){
  const imgUrl = select.options[select.selectedIndex].value;
  const baseImg = new Image();
  baseImg.crossOrigin = 'anonymous';
  baseImg.src = imgUrl;
  baseImg.onload = function() {
    // 调整canvas尺寸和背景图一致
    canvas.width = baseImg.width;
    canvas.height = baseImg.height;
    // 绘制背景图
    ctx.drawImage(baseImg, 0, 0);
    currentBaseImg = baseImg;
  }
}

// 拖拽小图片逻辑
const dragImg = document.getElementById('dragImg');
// 拖拽开始时记录图片信息
dragImg.addEventListener('dragstart', function(e) {
  e.dataTransfer.setData('text/plain', 'dragImg');
});

// 画布允许拖拽进入
canvas.addEventListener('dragover', function(e) {
  e.preventDefault();
});

// 画布接收拖拽放置
canvas.addEventListener('drop', function(e) {
  e.preventDefault();
  const type = e.dataTransfer.getData('text/plain');
  if (type === 'dragImg') {
    // 计算放置的坐标，相对于canvas左上角
    const x = e.offsetX;
    const y = e.offsetY;
    // 绘制拖拽的小图到对应位置
    ctx.drawImage(dragImg, x, y, dragImg.width, dragImg.height);
  }
});

// 初始化默认加载第一个选项的图片
window.onload = function() {
  setImage(document.getElementById('map'));
}
</script>

<style>
.canvas-container {
  width: 100%;
}
#drawCanvas {
  max-width: 100%;
  border: 1px solid #eee;
}
</style>

• 你原有已配置完成的绘制逻辑，直接挂载到上面代码中的canvas元素上即可正常生效。
• 所有涉及到的图片都需要配置跨域头，否则Canvas绘制会因为跨域限制报错。

内容的提问来源于stack exchange，提问作者Kevin P.