Question

我相信我的问题的答案可以在Is there an equivalent of canvas's toDataURL method for SVG?中找到。有人可以确认或给我指向正确的方向。

如果画布在Chrome和/或Safari上包含SVG，我无法使canvas.toDataURL（）生成正确的图像。下面的代码说明了这个问题。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function () {
        var __readLocalXml = function(file)
        {
            xmlHttp = new XMLHttpRequest();
            xmlHttp.open("GET",file,false);
            xmlHttp.send();
            return xmlHttp.responseXML;
        };

        var __drawSVG = function(context, sourceSVG, x, y){
            var svg_xml = (new XMLSerializer()).serializeToString(sourceSVG);

            var img = new Image();
            img.src="";
            var myFunction = function() {
                context.drawImage(img, x, y);
            }
            img.addEventListener('load', myFunction, false);
            img.src = "data:image/svg+xml;base64,"+btoa(svg_xml);

        };

        var settings = {
            //White King
            //Chess_klt45.svg
            //<http://en.wikipedia.org/wiki/File:Chess_klt45.svg>
            'whiteKingSVG'      : function() { return __readLocalXml("svg/Chess_klt45.svg") }
        }

        var canvas = document.createElement('canvas');
        var cw = canvas.width = 45;
        var ch = canvas.height = 45;

        var context = canvas.getContext('2d');

        context.fillStyle = '#FFFFCC';
        context.fillRect(0,
                         0,
                        ch,
                        cw);
        __drawSVG(context, settings.whiteKingSVG(),0,0);

        $('#withCanvas').after(canvas);
        $('#withToDataUrl').after('<img src="' + canvas.toDataURL() + '" />');
  });
  </script>
</head>
<body>
    <h1>Works</h1>
    <div id="withCanvas"></div>
    <hr>
    <h1>Does not Work</h1>
    <div id="withToDataUrl"></div>
</body>
</html>

我甚至使用节点0.4.2和使用cairo库的node-canvas编写了一个等效的程序，当使用带有SVG图像的canvas.toDataURL（）时，我得到了相同的结果。当使用node-canvas时，img.onload事件由于某种原因没有被触发，如果我试图在不等待onload事件的情况下绘制图像，我得到一个错误，说图像没有完成加载。节点程序也可以在下面找到。

var Canvas = require('canvas');

var __readFileNodeSync=function(file){
   var fs = require('fs');

   try {
      return fs.readFileSync(file, 'ascii');
   } catch (err) {
      console.error("There was an error opening the file:");
      console.log(err);
   }
}

var __loadXml_xmldom=function(file){
   var DOMParser = require("xmldom").DOMParser;
   var xml=__readFileNodeSync(file)
   return new DOMParser().parseFromString(xml)
}

var __drawSVG = function(context, sourceSVG, x, y){
   var btoa = require('btoa');
   var XMLSerializer = require("xmldom").XMLSerializer;
   var svg_xml = new XMLSerializer().serializeToString(sourceSVG);
   var img = new Canvas.Image;
   img.onload = function(){
      context.drawImage(img, x, y);
   }
   img.src = "data:image/svg+xml;base64,"+btoa(svg_xml);
};


var settings = {
   //White King
   //Chess_klt45.svg
   //<http://en.wikipedia.org/wiki/File:Chess_klt45.svg>
   'whiteKingSVG'      : function() { return __loadXml_xmldom("../svg/Chess_klt45.svg") }
}

   var canvas = new Canvas();
   var cw = canvas.width = 45;
   var ch = canvas.height = 45;

   var context = canvas.getContext('2d');

   context.fillStyle = '#FFFFCC';
   context.fillRect(0,
                    0,
                   ch,
                   cw);
   __drawSVG(context, settings.whiteKingSVG(),0,0);

   console.log("<html>");
   console.log("<head>");
   console.log("</head>");
   console.log("<body>");
   console.log('<img src="'+canvas.toDataURL() + '" />');
   console.log("</body>");
   console.log("</html>");

编辑感谢@ Phrogz的评论，我能够解决我的问题以下是解决问题的代码

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
  <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function () {

        var settings = {
            //White King
            //Chess_klt45.svg
            //<http://en.wikipedia.org/wiki/File:Chess_klt45.svg>
            'whiteKingSVG'      : "svg/Chess_klt45.svg" 
        }

        var canvas = document.createElement('canvas');

        var cw = canvas.width = 45;
        var ch = canvas.height = 45;
        var context = canvas.getContext('2d');

        context.fillStyle = '#FFFFCC';
        context.fillRect(0,
                     0,
                    ch,
                    cw);

        canvg(canvas, settings.whiteKingSVG, { 
                ignoreMouse: true, 
                ignoreAnimation: true, 
                ignoreDimensions: true, 
                ignoreClear: true, 
                offsetX: 0, 
                offsetY: 0
        });
        $('#withCanvas').after(canvas);
        $('#withToDataUrl').after('<img alt="whiteKing.png" src="' + canvas.toDataURL("image/png") + '" />');
  });
  </script>
</head>
<body>
    <h1>Works</h1>
    <div id="withCanvas"></div>
    <hr>
    <h1>Works! (using canvg)</h1>
    <div id="withToDataUrl"></div>
</body>
</html>

Answer 1

当您向其绘制SVG时，Webkit目前会玷污画布（由于难以跟踪的安全问题）。直到FF v12，这也是Firefox的情况，但它现在已经修复。如果需要数据URL，您现在需要使用像CanVG这样的SVG解析器。

toDataURL不适用于带有SVG图像的html5画布

1 个答案: