如何在 spainter js 中将图像设置为背景？

Question

我正在尝试在 spainter 中使用图像作为背景图像。

我使用 context.drawImage() 将图像设置到画布中但不起作用。

这里是我的代码：

<script src="https://cdn.jsdelivr.net/npm/spainter@1.0.0/index.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/spainter@1.0.1/index.css"/>
<div id="containerPainter"></div>
<script>
var p = new Painter(containerPainter);
var context = document.getElementsByTagName('canvas')[0].getContext('2d');
 base_image = new Image();
  base_image.src = 'https://i.stack.imgur.com/jGZtm.png';
  context.drawImage(base_image, 0, 0);
</script>

所以，我需要你的帮助。谢谢

Answer 1

您需要在加载后绘制图像。使用 onload 侦听器对您有用 :-

<script src="https://cdn.jsdelivr.net/npm/spainter@1.0.0/index.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/spainter@1.0.1/index.css"/>
<div id="containerPainter"></div>
<script>
var p = new Painter(containerPainter);
var context = document.getElementsByTagName('canvas')[0].getContext('2d');
 base_image = new Image();
  base_image.src = 'https://i.stack.imgur.com/jGZtm.png';
  base_image.onload = () => context.drawImage(base_image, 0, 0);
</script>

如果图像是 blob，它似乎可以工作。这是该代码（由于 StackOverflow 不允许超过某些字符限制而发布）：-

https://codepen.io/lapstjup/pen/YzZNWEX