Невозможно извлечь "base 64" из svg, нарисованного на холсте, используя Foreignobject

Question

Я использую пакеты svg-to-image и get-canvas-context npm.Без использования Foreignobject я могу извлечь холст в PNG изображение.Но главная проблема заключается в том, что мне нужно использовать ForeignObject в моем svg для выполнения требования.

var svgToImage = require('svg-to-image')
var getContext = require('get-canvas-context')

// set up a new Canvas2D
var context = getContext('2d', {
    width: 200, height: 200
})

var data = `<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<style>
div {
    color: white;
    font: 18px serif;
    height: 100%;
    overflow: auto;
}
</style>

<polygon points="5,5 195,10 185,185 10,195" />


<foreignObject x="20" y="20" width="160" height="160">

<div xmlns="http://www.w3.org/1999/xhtml">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
porta vel dui convallis, rutrum imperdiet eros. Aliquam
erat volutpat.
</div>
</foreignObject>
</svg>`;

var View = svgToImage(data, function (err, image) {
    if (err) throw err

  // draw image to canvas
context.drawImage(image, 0, 0)

  // append to DOM
  var canvas = context.canvas
  window.a=document.body.appendChild(context.canvas)
// console.log(a.toDataURL('image/png'))
  // open a PNG image the user can Right Click -> Save As
  window.open(context.canvas.toDataURL('image/png'))
})

export default View;