Question

我正在尝试将一些简单的html转换为要打印在png上的pdf图像。通过使用包含我页面的html的异物创建一个svg来实现。我的问题是，尽管在两个地方都复制/粘贴了相同的确切代码，但我在我制作的小提琴和实际应用程序之间看不到一致的结果。

我有我的系统应用程序，并且我的小提琴都在运行相同的确切功能，并且在该功能内，我基本上将tempImg.src的值设置为svg的值，然后可以将该图像绘制到画布上，最后抓住canvas.toDataURL()，从理论上讲，该结果将给出可以使用的一致base64结果。

getChartAndDetailsImageData: function (){
    var me = this,
        tempImg = new Image(900,450);

    var imageLoaded = function (event){
        var canvas  = document.createElement('canvas'),
            img = event.currentTarget;

        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;

        var ctx     = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        var dataURL = canvas.toDataURL('image/png');
        console.log(dataURL);
    };

    var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="900" height="450"><foreignObject width="100%" height="100%"><body xmlns="http://www.w3.org/1999/xhtml"><div><b>Ya YEET!</b><ol><li>Hello World :)</li></ol></div></body></foreignObject></svg>';
    var imgSrc = 'data:image/svg+xml,' + encodeURIComponent(svg);
    console.log(imgSrc);

    tempImg.onload = imageLoaded;
    tempImg.src = imgSrc;
}

现在，通过运行此代码，我将根据运行位置得到两个不同的结果。

1：小提琴：我的最终结果图像是-

这是期望的结果，这是我期望的，需要看到的

但是我的系统应用程序给了我这个结果图像-

真正缩水了，看上去很恐怖。

关于svg以及如何获取base64图片的正确一致的png编码，我是否缺少一些细节？

例如。）将这两种编码都插入此网站以直观地看到区别（https://codebeautify.org/base64-to-image-converter）

任何帮助和/或解释将不胜感激。

编辑。）似乎我已经弄清楚了。我只是用div包裹了内部html并在其上拍了一个fontsize，现在我似乎得到了一致的结果。我不完全确定这是获得所需结果的最有效方法，因此，将非常感谢您进行任何解释和/或其他可能的修复。

谢谢大家！

通过SVG图像将简单的html转换为png图像并转换为base64编码

0 个答案: