CanvasRenderingContext2D drawImage() 在 Chrome 中无法正常工作

Question

我目前正在开发一个网络应用程序。作为其中的一部分，我在内部创建 SVG 图像。在渲染方面，我使用此问题中提供的方法将 svg 转换为位图并将其显示在画布上：https://stackoverflow.com/a/23667012/5767042

大多数情况下，这可以正常工作，但有时它不会渲染 SVG 图像。使用 chrome DevTools，我能够确认传递给 drawImage() 的对象（在下面的示例中，这将是 imageBitmap）在每次调用中都是相同的，但有时它会被渲染有时它不会。我完全不理解这种行为。

var svgStr = "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100\" height=\"100\" shape-rendering=\"crispEdges\" stroke-linecap=\"square\"><line x1=\"0\" y1=\"0\" x2=\"50\" y2=\"50\" stroke=\"rgb(0,0,0)\" stroke-width=\"4\"\/><line x1=\"0\" y1=\"50\" x2=\"50\" y2=\"0\" stroke=\"rgb(0,0,0)\" stroke-width=\"4\"\/><\/svg>";

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var imageBitmap = new Image();
imageBitmap.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr);
console.log('drawing bitmap');

ctx.drawImage(imageBitmap, 0, 0);

<canvas id="myCanvas" width="200" height="100"></canvas>

我是否以错误的方式使用drawImage()？我在 Firefox 中也有同样的行为，Edge 根本不起作用。我也在三台不同的机器上测试过，没有区别。

Answer 1

您需要等到图像加载完毕。为此，您可以使用图像的 .onload 处理程序，该处理程序在加载时调用。

var svgStr = "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100\" height=\"100\" shape-rendering=\"crispEdges\" stroke-linecap=\"square\"><line x1=\"0\" y1=\"0\" x2=\"50\" y2=\"50\" stroke=\"rgb(0,0,0)\" stroke-width=\"4\"\/><line x1=\"0\" y1=\"50\" x2=\"50\" y2=\"0\" stroke=\"rgb(0,0,0)\" stroke-width=\"4\"\/><\/svg>";

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var imageBitmap = new Image();
imageBitmap.src = 'data:image/svg+xml;base64,' + window.btoa(svgStr);

function drawBitmap() {
  console.log('drawing bitmap');

  ctx.drawImage(imageBitmap, 0, 0);
}

imageBitmap.onload = drawBitmap;

<canvas id="myCanvas" width="200" height="100"></canvas>