如何将多个图像绘制到单个画布上？答案

【问题标题】：How to draw multiple images to a single canvas?如何将多个图像绘制到单个画布上？
【发布时间】：2021-12-23 09:01:29
【问题描述】：

我正在制作一个网站，让用户可以绘制草图并指定他们的位置和大小；然后，我将它们保存到数据库中。在不同的路线中，我想加载这些图像并将它们显示在单个画布上。

我为此使用了drawImage 函数，但是会发生第二个图像被绘制在第一个图像上的情况。就像下图中circle 和triangle 的两个草图：

这是我在画布上绘制图像的方法：

var canvas = document.getElementById("paint");    
var ctx = canvas.getContext("2d");
function loadImages(data, targetX, targetY, targetWidth, targetHeight) {

    data = data.replace(/'/g, '"');
    targetX = targetX.replace(/'/g, '"');
    targetY = targetY.replace(/'/g, '"');
    targetWidth = targetWidth.replace(/'/g, '"');
    targetHeight = targetHeight.replace(/'/g, '"');

    data = JSON.parse(data);
    targetX = JSON.parse(targetX);
    targetY = JSON.parse(targetY);
    targetWidth = JSON.parse(targetWidth);
    targetHeight = JSON.parse(targetHeight);

    for(var i = 0; i < data.length; i++) {
        var img = new Image();
        var tx = parseInt(targetX[i]);
        var ty = parseInt(targetY[i]);
        var tw = parseInt(targetWidth[i]);
        var th = parseInt(targetHeight[i]);
        img.src = data[i];
        img.onload = function() {
            ctx.drawImage(this, tx, ty, tw, th);
        };

        
    }

}

此处的字符串格式化将从数据库（通过 Flask）获取的数据转换为 JavaScript 数组。我在img、tx、ty、tw、th 等所有变量上都使用了console.log()，它们都有所需的值，但仍然在画布上，它们没有正确绘制所以我无法缩小问题的范围。

这是我在 HTML 文件中调用函数的方式：

{% block content %}
{% if files %}

<button id="show" onclick="loadImages(`{{ data }}`, `{{ targetX }}`, `{{ targetY }}`, `{{ sizeX }}`, `{{ sizeY }}`)">View</button>

<canvas id="paint" width="512" height="512" style="border: 5px solid #000000;"></canvas>
{% endif %}
    
<script src=" {{ url_for('static', filename='edit.js') }}"></script>

{% endblock %}

【问题讨论】：

标签： javascript html image canvas draw

【解决方案1】：

您正在同步循环中执行异步操作。试试这个..

var canvas = document.getElementById("paint");
var ctx = canvas.getContext("2d");

async function loadImages(data, targetX, targetY, targetWidth, targetHeight) {
  var images = {};
  data = data.replace(/'/g, '"');
  targetX = targetX.replace(/'/g, '"');
  targetY = targetY.replace(/'/g, '"');
  targetWidth = targetWidth.replace(/'/g, '"');
  targetHeight = targetHeight.replace(/'/g, '"');

  data = JSON.parse(data);
  targetX = JSON.parse(targetX);
  targetY = JSON.parse(targetY);
  targetWidth = JSON.parse(targetWidth);
  targetHeight = JSON.parse(targetHeight);

  for (var i = 0; i < data.length; i++) {
    var tx = parseInt(targetX[i]);
    var ty = parseInt(targetY[i]);
    var tw = parseInt(targetWidth[i]);
    var th = parseInt(targetHeight[i]);
    var img = await loadImage(data[i]);
    ctx.drawImage(img, tx, ty, tw, th);
  }

}

function loadImage(src){
  return new Promise(done=>{
    var img = new Image();
    img.src = src;
    img.onload = function() {
      done(img);
    };
  });
}

【讨论】：