Question

我正在使用npm的svg-to-image和get-canvas-context包。不使用异物，我可以将画布提取为png图像。但是主要问题是我需要在svg中添加foreignObject来满足要求。

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;

Answer 1

您正在客户端使用“ svg-to-img”包。在服务器端（节点）上使用相同的程序包

list1 = [ [0,0], [0,1], [0,2], [900,800]] 
list2 = [ [0,0], [1,0], [1,1], [900,800]]
list1 = set(tuple(l) for l in list1)
list2 = set(tuple(l) for l in list2)
list1.intersection(list2)
#{(0, 0), (900, 800)}

无法使用异物从画布上绘制的svg中提取“ base 64”

1 个答案: