如何将填充样式（纹理）设置为 canvas 中的现有数据 URI

Question

我有一个现有的 PNG 数据 URI，例如：

let dataURI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAD+qAB849H0AAAAAXRSTlMAQObYZgAAAAxJREFUCNdjSEsgiACnWAlJEDYe/gAAAABJRU5ErkJggg==";

我想在我的 canvas 中使用它作为纹理，我正在对其进行一些绘制操作。我用 canvas.fillStyle 尝试了一些方法，但我没有看到它起作用。颜色效果很好。

在绘图操作中将dataURI用作纹理的方法是什么？

Answer 1

您需要先将其作为图像加载（一定要处理异步方面），所以基本上将图像设置为模式：

var img = new Image;
img.onload = imageIsReady;
img.src = "data: ....."; // full uri here

function imageIsReady() {
  var pattern = ctx.createPattern(img, "repeat");
  ctx.fillStyle = pattern;
  // fill, etc.
}

如何将填充样式（纹理）设置为 canvas 中的现有数据 URI

How to set a fill style (texture) to an existing data URI in canvas

javascript

canvas

data-uri