javascript - AngularJS 下载 SVG 为 JPG

Question

我正在尝试创建一个将 SVG 转换为 JPG/PNG 的指令。我找到了这个网站:

http://bl.ocks.org/mbostock/6466603

所以我试着用这个做同样的事情:

.directive('export', function () {
    return {
        restrict: 'A',
        scope: {
            target: '@export'
        },
        link: function (scope, element) {

            // Bind to the onclick event of our button
            element.bind('click', function (e) {

                // Prevent the default action
                e.preventDefault();

                var target = document.getElementById(scope.target),
                    canvas = document.querySelector('canvas'),
                    context = canvas.getContext('2d');

                console.log(target);

                if (target) {

                    var preview = target.getElementsByTagName('svg');

                    console.log(preview);

                    var img = new Image;

                    img.src = preview[0];
                    img.onload = function () {

                        console.log('loaded');

                    };
                }
            });
        }
    };
});

问题是 img.src。我不确定我是否设置正确，在上面网站的示例中，它使用了一个位置而不是实际的 svg 文件。有谁知道我怎样才能让它发挥作用？

Answer 1

实际上可以使用 createObjectURL 从 SVG 元素创建 URL .有关此技术的更多信息，请参阅更一般的主题 Drawing DOM objects into a canvas在 MDN 上。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = document.getElementById('container').innerHTML;
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
}

img.src = url;

canvas {
  border: 1px dashed red;
}

<div id="container">
  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" id="svg">
    <rect width="50" height="50"></rect>
  </svg>
</div>

<canvas width="200" height="200" id="canvas"></canvas>