时间戳

首页 > 解决方案 > 我可以在 javascript 中组合画布和图像元素吗？

javascript - 我可以在 javascript 中组合画布和图像元素吗？

问题描述

我想将我的“图像”变量转换为画布类型并将其与“画布”变量（框）元素结合起来创建另一个画布元素。这个输出画布将在后面有图像，在前面有框的画布。我指的是http://jsfiddle.net/bnwpS/878/

HTML：

<div id="output"></div>

Javascript：

const container = document.getElementById("output");
const image = await faceapi.bufferToImage(imageUpload.files[0]);
const canvas = faceapi.createCanvasFromMedia(image);
container.append(image);
container.append(canvas);

我尝试过一件事但没有成功：

  1. 使用 createElement('canvas') 创建了另一个画布元素，然后使用 drawImage() 在其上绘制图像和画布，但是结果显示为黑色。

标签： javascript

解决方案

尝试使用此函数将图像写入画布：

function writeImageToCanvas(image, cvs) {
  const img = document.createElement('img');
  return new Promise(resolve => {
    img.onload = () => {
      cvs.width = img.width;
      cvs.height = img.height;
      const ctx = cvs.getContext('2d');
      ctx.drawImage(img, 0, 0);
      resolve();
    };
    img.src = image.src;
  });
}

请注意，这是一个异步函数，因此需要使用writeImageToCanvas(img,cvs).then(...或使用 await 并将调用函数标记为异步。

推荐阅读