`data:image/svg+xml;base64,'+ btoa(unescape(encodeURIComponent(${svg}))) `
`DOMURL.createObjectURL(${svg})`
然后利用canvas，渲染生成base64，事实证明不好使。含有特殊字体生成图片不显示。
svg-to-image 字体不出现，适合简单需求
字体转svg
text-to-svg const textToSVG = TextToSVG.loadSync('/fonts/Noto-Sans.otf'); const svg = textToSVG.getSVG('hello'); 就像上面写的这样，需要load一下字体，把你想转的字体转成path，然后根据样式，再插入到svg里面，置于插入回到svg，最后生成你想要的格式和结果，需要你慢慢研究，相当复杂的计算。然后配合前端html2canvas 等任何插件或者后端都可以实现svg转png了。
缺点：不简单，虽然我们也在使用这种方式，需要花点时间把生成好的path放回到svg里面，到时候你可以用snap类似的插件
后端NODEJS实现方式
node端整体分为phantomjs和chromium headless这两大分支。 大家都知道phantomjs 已经没人维护了，性能比chromium headless差个等级，我个人建议用后者。
phantomjs 类插件
缺点：无法使用独立字体，可以配合上面的text-to-svg使用。
你妹的起个名字就叫phantom，真的会让人误解。他的优点就是node封装的phantom，可以直接调用，创造属于你的DIY let { svg, width, height } = req.body
let html = `
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>Shell</title>
<link rel="stylesheet" href="./font.css">
</head>
<style>
body,html{
background: #333333;
margin: 0;
width: 100%;
height:100%;
padding: 0px;
font-weight: normal;
-webkit-touch-callout: none;
-webkit-user-select: none;
#Viewport {
position:relative;
width:100%;
height:100%;
</style>
<div id="Viewport" style="display:inline-block;">
${svg}
</body>
</html>
const instance = await phantom.create()
const page = await instance.createPage()
const fileName = uuid() + '.html'
await writeFile(fileName, html, 'utf8')
const status = await page.open(fileName)
let viewportSize = { width: Number(width), height: Number(height) }
await page.evaluate(function () {
var w = document.querySelector(".ks-canvas-container").getAttribute('width');
var h = document.querySelector(".ks-canvas-container").getAttribute('height');
return {
width: Number(w),
height: Number(h)
}).then(function (svgInfo) {
viewportSize = svgInfo;
});*/
await page
.property('viewportSize', viewportSize)
.then(function() {})
await page
.property('clipRect', { x: 0, y: 0, ...viewportSize })
.then(function() {})
const base64Data = await page.renderBase64('PNG')
chromium headless 类插件
内部实际用的puppeteer，目前稍微有个小bug，我已经联系了作者。不过问题不大，我目前用着最好用的。
// 将这段style插入到svg里面,不需要转baseURI
// <svg><style>@fant-face {xxxxxxxxxx} ……….. ……
let svgStyle = `
@font-face { font-family: "demo";
src: url(xxxx/www/demo.woff) format('woff');
// 请求
fetch('http://XXXXXX/convert',
method: 'POST',
headers: {
'Accept-Charset': 'utf-8',
'Accept': 'application/json;charset=utf-8',
'Content-Type': 'application/json;charset=utf-8'
body:JSON.stringify({
svg: $('.preview').html()
}).then((response) => {
return response.json();
}) .then(data => {
// node 端
app.post('/convert', async(req, res) => {
const png = await convert(req.body.svg);
res.set('Content-Type', 'image/png');
res.send(png);
其他的插件我就不介绍了svg-to-img。目前试着不大好用，主要还是字体生成的原因。
svg转png真是个好傻的活，花费了很长时间，可能会有人说用java，那你才傻，java那个包旧的想拉屎。 建议纯前端生成的话用html2canvas，时间充裕讲究性能，用text-to-svg转一下。 后端用convert-svg-to-png。 我个人更建议后端生成，缺点也是很显著的，占用带宽。
为什么80%的码农都做不了架构师？>>> ...
tag: Web; JavaScript; SVG; DOM; 动画 SVG
最近在项目中遇到了「带动画 SVG 图标」与 「image」标签结合使用的场景，使用过程中发现水还是有点深，因此整理出来，供有相似场景的童鞋以参考。
我们这里有一个的带动画 SVG 文件
这是一个水波纹效果的 SVG，动画时长是固定的，但是我们希望不同的标记动画的播放时长可以略有不同，进而产生错落交错的感觉。...
其实只是做了简单封装,可以方便进行批量
转换.
获取
Svg对象坐标的代码请看：根据
svg节点对象类型和路径值
转换坐标值，
DrawingColor
方法是进行颜色填充的.
/// <summary>
///
svg文件
转换为
图片
/// </summary>
/// <param name="...
1.情景展示
闲来无事的时候，发现chrome扩展程序里面有图像，本想下载下来，却发现文件格式是svg格式，如何将svg文件改成图片格式？
chrome-extension://jlgkpaicikihijadgifklkbpdajbkhjo/image/rating/1-stars.svg
2.解决方案
第一，JavaScript文件。
(function...
SVG 提供了沿任意路径绘制文本的功能，我需要在我的Chord Snip附加组件中执行此操作，但我没有任何方法可以获取生成的 SVG 并创建一个图像，Google Sheets 可以将其用作嵌入图像。
理想情况下，我想使用浏览器来呈现 SVG 而不是 canv
使用画布将svg转换为png或jpg
Install
npm install --save git+https://github.com/anzerr/svg.to.img.git
npm install --save @anzerr/svg.to.img
Example
const convert = require ( 'svg.to.img' ) ,
fs = require ( 'fs.promisify' ) ;
convert ( './test/1.svg' , { width : 100 , height : 100 } ) . then ( ( res ) => {
return fs . writeFile ( '1.png' , res ) ;
} ) ;
https://image.online-convert.com/convert-to-svg
https://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser
https://stackoverflo...
async function svg2png(svg, png) {
const image = await loadImage(svg)
const canvas = createCanvas(image.width, image.height)
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0)
const buffer = canvas.toBuffer()
fs.writeFileSync(png, buffer)
svg2png('input.svg', 'output.png')
此代码将“input.svg”文件转换为“output.png”文件。
挂过科的茴香
How to Fix Error javalangUnsatisfiedLinkError orgapachehadoopionativeioNativeIOWindows | Saturn Cloud Blog
10 月前
