drawImage() 中的 TypeMismatchError

Question

我正在使用 drawImage()。这是我的代码。 imDiv 包含内联 svg。

  var c =document.getElementById( 'cvs' );
  var ctx =c.getContext( '2d' );
  var img =document.getElementById( 'imDiv' );
   ctx.drawImage( img, 0, 0 );  //TypeMismatchError

我遇到 TypeMismatchError 错误。可能是什么原因，我该如何解决？

Answer 1

截至目前，无法将 div 或 svg 元素绘制到 canvas 上。传递给 context.drawImage() 的第一个参数必须是 Image、canvas，甚至是视频元素（使用 svg 可能会导致 TypeMismatchError）。

因此，您将使用 getElementById() 在文档中检索实际的 Image 或使用 new Image() 创建一个。

Answer 2

您必须先将 SVG 转换为图像，然后将图像绘制到 canvas。

您需要考虑一些事项：

SVG 必须格式正确（认为 XML）
SVG 中的第一个元素必须是 xmlns 属性
当涉及 foreignObject（嵌入 HTML 等）时，根据浏览器的不同会有不同的安全限制。它会在一些（Firefox，没有外部引用）中工作，其他的则不是那么多（f.ex。Chrome）。这目前处于真空状态，我们在客户端对此无能为力

这是一种方法：

// Inline SVG:
var svg = document.querySelector('svg').outerHTML,  // make sure SVG tags are included
  canvas = document.querySelector('canvas'),        // target canvas
  ctx = canvas.getContext('2d');

// convert to image (see function below)
// converting to image is an asynchronous process, so we need a callback
svgToImage(svg, function(img) {

  // HERE you could insert the image to DOM:
  // var myElement = document.getElementById(elementID);
  // myElement.appendChild(img);
  
  // set canvas size = image
  canvas.width = img.width;
  canvas.height = img.height;

  // draw SVG-image to canvas
  ctx.drawImage(img, 0, 0);
});

// this will convert an inline SVG to a DATA-URI
function svgToImage(svg, callback) {
  var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg),
      img = new Image;

  // handle image loading, when done invoke callback
  img.onload = function() {
    callback(this);
  };

  img.src = url;
}

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <linearGradient id="gradient">
    <stop offset="0%" stop-color="#00f" />
    <stop offset="100%" stop-color="#f70" />
  </linearGradient>
  <rect fill="url(#gradient)" x="0" y="0" width="100%" height="100%" />
</svg>

<br>
<canvas></canvas><br>

drawImage() 中的 TypeMismatchError

TypeMismatchError in drawImage()

html

javascript

jquery

canvas

这是一种方法：