将嵌入的 SVG 就地转换为 PNG [英] Convert embedded SVG to PNG in-place
问题描述
我正在从 Docbook 源生成 HTML，同时将 SVG 用于图像(从 MathML 转换).这对于一些可以解释 SVG 的浏览器来说很好，但对于其他浏览器来说却失败了.
I'm generating HTML from a Docbook source while using SVG for images (converted from MathML). This works fine for some browsers that can interpret SVG, but fails for others.
我真正想要的是添加一个后处理步骤，将 SVG就地"转换为 PNG(在 HTML 中).
What I would really like is to add a post-processing step that will convert SVG to PNG "in-place" (within the HTML).
就像这样:
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="50" cy="50" r="30" />
</svg>
</body>
将无缝转换为:
<body>
<img src="img0001.png" />
</body>
我会在旁边得到一个转换后的 PNG.
And I would get a converted PNG alongside.
有什么可以做到这一点的吗?
Is there something that will do this?
推荐答案
Demo: http://phrogz.net/SVG/svg_to_png.xhtml
- 创建一个
img并将其 src 设置为您的 SVG. - 创建一个 HTML5 画布并使用
drawImage()将该图像绘制到您的画布上. - 在画布上使用
toDataURL()获取 base64 编码的 PNG. - 创建一个 img 并将其 src 设置为该数据 URL.
- Create an
imgand set its src to your SVG. - Create an HTML5 canvas and use
drawImage()to draw that image to your canvas. - Use
toDataURL()on the canvas to get a base64 encoded PNG. - Create an img and set it's src to that data URL.
var mySVG = document.querySelector('…'), // Inline SVG element
tgtImage = document.querySelector('…'), // Where to draw the result
can = document.createElement('canvas'), // Not shown on page
ctx = can.getContext('2d'),
loader = new Image; // Not shown on page
loader.width = can.width = tgtImage.width;
loader.height = can.height = tgtImage.height;
loader.onload = function(){
ctx.drawImage( loader, 0, 0, loader.width, loader.height );
tgtImage.src = can.toDataURL();
};
var svgAsXML = (new XMLSerializer).serializeToString( mySVG );
loader.src = 'data:image/svg+xml,' + encodeURIComponent( svgAsXML );
但是，此答案(以及所有仅客户端解决方案)要求浏览器支持 SVG，这可能使其无法满足您的特定需求.
However, this answer (and all client-side only solutions) require the browser to support SVG, which may make it useless for your specific needs.
Edit:此答案假定 SVG 可用作单独的 URL.由于在这个问题中描述的问题，我无法获得上述内容使用嵌入在执行工作的同一文档中的 SVG 文档.
Edit: This answer assumes that the SVG is available as a separate URL. Due to the problems described in this question I cannot get the above to work with an SVG document embedded in the same document performing the work.
编辑 2:Chrome 和 Firefox 的改进已经克服了其他问题中描述的问题.仍然存在限制 元素必须具有 width="..." height="..." 属性的 Firefox 允许它被绘制到画布上.每当您向其绘制任何 SVG(无论来源如何)时，Safari 目前都会污染整个画布，但是 这应该很快就会改变.
Edit 2: The problems described in that other question have been overcome by improvements to Chrome and Firefox. There is still the limitation that the <svg> element must have width="…" height="…" attributes for Firefox to allow it to be drawn to a canvas. And Safari currently taints the entire canvas whenever you draw any SVG to it (regardless of source) but that should change soon.
这篇关于将嵌入的 SVG 就地转换为 PNG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
