是否有办法使用SVG作为ImageData来创建一个Stamp注解？

Question

我想在PDFTron中使用SVG创建一个自定义邮票注释。

我在某个谷歌论坛上看到有人有同样的问题，一个PDFTron的开发者实际上也回答了这个问题，这就是我目前所拥有的......

const svgElement = '<svg>my svg</svg>'

const CustomStamp = function() {
   Annotations.StampAnnotation.call(this);
   this.ImageData = encodeURI('data:image/svg+xml,' + svgElement);
}

CustomStamp.prototype = new Annotations.StampAnnotation();

const CustomCreateTool = function(docViewer) {
            Tools.GenericAnnotationCreateTool.call(this, docViewer, CustomStamp);
        };

CustomCreateTool.prototype = new Tools.GenericAnnotationCreateTool();

CustomCreateTool.prototype.mouseLeftDown = function() {
            Tools.AnnotationSelectTool.prototype.mouseLeftDown.apply(this, arguments);
        };

CustomCreateTool.prototype.mouseMove = function() {
            Tools.AnnotationSelectTool.prototype.mouseMove.apply(this, arguments);
        };

CustomCreateTool.prototype.mouseLeftUp = function(e) {
            var annotation;
            Tools.GenericAnnotationCreateTool.prototype.mouseLeftDown.call(this, e);
            if (this.annotation) {
              this.annotation.Width = 50;
              this.annotation.Height = 50;
              this.annotation.X -= this.annotation.Width/2;
              this.annotation.Y -= this.annotation.Height/2;
              this.annotation.NoResize = true;
              annotation = this.annotation;
            }
            Tools.GenericAnnotationCreateTool.prototype.mouseLeftUp.call(this, e);
            if (annotation) {
              annotManager.redrawAnnotation(annotation);
            }

然而，它似乎只画了一个空框... 任何帮助将被感激

Answer 1

我审查了你的代码，它似乎是正确的。我自己试了一下，我相信问题出在你的测试SVG上；看来，通过遗漏的 xmlns 标签时，它会导致一个无效的HTMLImage元素，当调用 encodeURI.

你能用下面的SVG试试你的代码吗？我用它来调试，盖章和预期的一样。

const svgElement = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg>'