Question

我目前正在开发Web应用程序。作为其一部分，我在内部创建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>

CanvasRenderingContext2D drawImage（）在Chrome中无法正常工作

1 个答案: