drawImage中的TypeMismatchError [英] TypeMismatchError in drawImage()

问题描述

我使用 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 错误。可能的原因是什么？如何解决这个问题？

解决方案

您必须先将SVG转换为图片，然后将图片绘制到画布。 / p>

有些事情你需要考虑：

• SVG必须




• SVG中的第一个元素必须是xmlns归属


• 来到 foreignObject （嵌入HTML等）。它将在一些（Firefox，没有外部引用），其他没有那么多（f.ex. Chrome）。

这里有一种方法可以做到这一点this：

< preHTML SVG：var svg = document.querySelector（'svg'）。outerHTML，//确保包含SVG标签。返回页首返回页首返回页首返回页首返回页首返回页首返回页首返回页首返回页首返回页首返回页首canvas = document.querySelector（'canvas'），// target canvas ctx = canvas.getContext（'2d'）; // convert to image（见下面的函数）//转换为image是一个异步过程，因此我们需要一个callbacksvgToImage（svg，function（img）{//这里你可以插入图像到DOM：// var myElement = document.getElementById（elementID）; // myElement.appendChild（img）; //设置canvas size = width = img.width; canvas.height = img.height; //将SVG图像绘制到画布ctx.drawImage（img，0，0）;}）; //这会将内联SVG转换为DATA-URI函数svgToImage （svg，callback）{var url =data：image / svg + xml; charset = utf-8，+ encodeURIComponent（svg），img = new Image; // handle image loading，when completed invoke callback img.onload = function（）{callback（this）; }; img.src = url;}

 < svg xmlns = http://www.w3.org/2000/svgwidth =100height =100> < linearGradient id =gradient> < stop offset =0％stop-color =＃00f/> < stop offset =100％stop-color =＃f70/> < / linearGradient> < rect fill =url（#gradient）x =0y =0width =100％height =100％/>< / svg>< br& < / canvas>< br>  

I'm using drawImage(). This is my code. imDiv holds an inline svg.

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

I'm getting a TypeMismatchError error. What might be the reason and How can I fix this?

解决方案

You must convert the SVG to an image first, then draw the image to canvas.

There are some things you need to take into consideration:

• The SVG must be well-formed (think XML)
• The first element in the SVG must be xmlns attributed
• There are variable security restrictions depending on browser when it comes to foreignObject (to embed HTML etc.). It will work in some (Firefox, without external references), others not so much (f.ex. Chrome). This is currently in a state of vacuum, and we can't do much about it on client side

Here is one way of doing this:

// 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！