一个js函数调用多个html canvas的draw和drawImage方法可以保存到单个Image对象中吗？

Question

一个js函数调用多个html canvas的draw和drawImage方法可以保存到单个Image对象中吗？

一直在寻找一种方法来做到这一点。我正在考虑以某种方式利用 html canvas Clip() 方法，但目前还没有运气。

Answer 1

您可以将内存中的画布转换为blob，然后通过

Image

将其加载到

createObjectURL中。

但根据您的最终目标，您甚至可能不需要

Image

对象，例如： 您可以直接在另一个画布的渲染上下文上绘制画布，而不需要中间图像。

document.getElementById("btndraw").addEventListener("click", async () => {
  try {
    const img = await drawToNewImage(drawToContext);
    document.getElementById("divtarget")
      .appendChild(img);
  } catch (e) {
    console.error(e);
  }
});

async function drawToNewImage(drawFn) {
  const canvas = document.createElement("canvas");
  canvas.width = 100;
  canvas.height = 100;
  
  const ctx = canvas.getContext("2d");
  drawFn(ctx);
  const blob = await new Promise(resolve => {
    canvas.toBlob(resolve);
  });
  const img = new Image(100, 100);
  img.src = URL.createObjectURL(blob);
  return img;
}

function drawToContext(ctx) {
  ctx.strokeStyle = "black";
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(100, 100);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(50, 50, 45, 0, 2 * Math.PI);
  ctx.stroke();
}

<button type="button" id="btndraw">Draw</button>
<div id="divtarget"></div>