javascript - drawImage() 中的类型不匹配错误

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 转换为图像，然后将图像绘制到 Canvas 上。

您需要考虑一些事项:

• SVG 必须格式良好(例如 XML)
• SVG 中的第一个元素必须具有 xmlns 属性
• 当涉及到 foreignObject(嵌入 HTML 等)时，根据浏览器的不同，存在不同的安全限制。它可以在某些(Firefox，没有外部引用)中工作，而另一些则不太有效(例如 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>