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

【问题标题】：How to set image as the background in spainter js?如何在 spainter js 中将图像设置为背景？
【发布时间】：2021-05-20 09:10:25
【问题描述】：

我正在尝试在 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>

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

【问题讨论】：

标签： javascript html canvas

【解决方案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

【讨论】：

这不再有效
绘制时显示错误
另一个答案？ @LakshyaThakur
你能查看我分享的 codepen 链接吗？以某种方式将相同的图像转换为 blob 并在其上绘画。目前还不确定原因。也可以通过代码转换为 blob。 fetch+URL.createObjectURL 帮助我们实现了这一目标，但是当尝试 fetch 图像时，出现 cors 错误。这就是硬编码 blob 的原因。
我使用 this 网站获得了 blob，我只是在该网站上上传了您的 png 以获取 data:uri。