2

私の問題に対する答えは Is there an equality 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>

node 0.4.2 と node-canvas を使用して cairo ライブラリを使用して同等のプログラムを作成したところ、SVG 画像で canvas.toDataURL() を使用したときに同じ結果が得られました。node-canvas を使用すると、何らかの理由で img.onload イベントがトリガーされず、onload イベントを待たずに画像を描画しようとすると、画像の読み込みが完了していないというエラーが発生しました。node プログラムは以下にもあります。

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

1 に答える 1

0

Webkit は現在、SVG をキャンバスに描画すると、キャンバスを汚染します (追跡が困難なセキュリティ上の問題のため)。FF v12 までは Firefox でも同様でしたが、現在は修正されています。データ URL が必要な場合は、現時点では CanVG などの SVG パーサーを使用する必要があります。

于 2013-09-12T22:27:50.160 に答える