画布在绘制SVG后“受污染”
也有人问过类似的问题，问题的原因也很清楚，我所要求的是替代方案或解决方案：
我想要做的是从画布中获取一个数据-URL，该画布上有一个SVG文档。我已经尝试过各种各样的东西，但是IE9和Chrome只是不允许我在SVG接近画布的时候就得到这个URL。
我试过：
- Canvg (不支持我所需要的一切)
- 将svg文件直接绘制到画布(content.drawImage(svg，0))
- 创建整个svg文档的base64字符串，使其成为文件的源，然后将该图像绘制到画布上。
- 将svg保存到文件中，将src属性设置为指向文件(在同一域上)，然后将其绘制到画布上。
我的想法快用完了。
是否有类似的库，我可以尝试，将栅格svg？在绘图之前，我是否还可以将SVG转换成其他东西，这样画布就不会知道SVG涉及到了什么？是否有一种非常简单的方法来使用PHP或其他类似的方法来实现服务器端的转换？
回答 2
Stack Overflow用户
发布于 2013-10-09 23:49:18
如果您想对SVG进行栅格化，下面是几个项目：
- SVG BTOA串行化
- 从序列化SVG到服务器端的栅格化
以下是一个浏览器兼容性表：
- 从SVG到画布和背面
Stack Overflow用户
发布于 2017-11-27 12:34:45
做三件事
- 获取SVG并使用XMLSerializer解析它
- 在绘制SVG之前更改画布的高度和宽度
- 使用“画布”库解析SVG，而不是使用带有本地画布方法的浏览器上的画布。
//获取svg元素，然后将其序列化为字符串var SVG = document.querySelectorAll('svg')；var base64 = []；for(i=0；i< svg.length；i++){ var序列化程序=新XMLSerializer()；var svgString = serializer.serializeToString(svgi)；var画布=document.querySelectorAll(‘画布’)；render_width = 1000；var render_height = 600；//CHange/Set画布宽度/高度属性以重置原始标记canvasi.height = render_height；canvasi.width = render_width；//使用画布库解析SVG并在给定画布画布上绘制图像(canvasi、svgString、{ useCORS: true、scaleWidth: render_width、scaleHeight: render_height、ignoreDimensions: true、log: true })；//将画布转换为png格式的dataURL并保存其主体var rawImage = canvasi.toDataURL(" image /png")；//Array包含以base64数据URL形式的所有图像。base64ImageArray.push(rawImage)；}
希望这能有所帮助。
https://stackoverflow.com/questions/14614336
复制相似问题
腾讯云开发者
