如何在單個畫布上繪制多個影像？-有解無憂

我正在制作一個網站，讓用戶繪制草圖并指定他們的位置和大小；然后，我將它們保存到資料庫中。在不同的路線中，我想加載這些影像并將它們顯示在單個畫布上。

我drawImage為此使用了該函式，但發生的情況是第二張影像被繪制在第一張影像上。如下圖所示，acircle和 a的兩個草圖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 陣列。我已經使用console.log()了所有變數，如img, tx, ty, tw，th并且所有變數都具有所需的值，但仍然在畫布上它們沒有被正確繪制，所以我無法縮小問題的范圍。

下面是我在 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 %}

uj5u.com熱心網友回復：

您正在同步回圈中執行異步操作。嘗試這個..

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);
    };
  });
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/355573.html

標籤：javascript html 图片帆布画

上一篇：我想在類選擇器中添加陣列元素

下一篇：如何使用Html和Css創建計劃串列？