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

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

您需要考虑以下事项：

• SVG必须格式正确（想想XML）
• SVG中的第一个元素必须是xmlns attributes
• foreignObject（嵌入HTML等）取决于浏览器，存在可变的安全限制。它可以在一些（Firefox，没有外部参考），其他没有那么多（f.ex.Chrome）。这目前处于真空状态，我们无法在客户端做很多事情

这是一种方法：

＆＃13;

＆＃13;

// 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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