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。有关此技术的更多信息，请参阅MDN上Drawing DOM objects into a canvas的更一般主题。

＆＃13;

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;

＆＃13;

canvas {
  border: 1px dashed red;
}

＆＃13;

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

＆＃13;

AngularJS下载SVG作为JPG

1 个答案: