相关疑难解决方法(0)
将内联SVG另存为JPEG/PNG/SVG
我的html中有一个内联SVG,我需要能够将其保存为JPEG,PNG或SVG.
我尝试了一些不同的方法,将SVG转换为画布,然后转换为JPEG,但我无法使这些工作.
这是我的内联SVG的一个例子.
.font {
color: #ffffff;
font-family: Roboto;
font-weight: bold;
text-transform: uppercase;
}
.name {
font-size: 64pt;
}
.top-bar-text {
font-size: 32pt;
}
.font tspan {
dominant-baseline: middle;
}<link href='http://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
<svg width="256" height="256" id="icon">
<rect class="bg1" id="bg_color_1" x="0" y="0" width="256" height="256" fill="#4cbc5a" />
<path class="bg2" id="bg_color_2" d="M 0 96 L0,256 L256,256 L256,96 s -128 96 -256 0" fill="#08a21c" />
<text id="left_corner_text" x="24" y="36" width="48" height="64" class="top_bar lct font top-bar-text" text-anchor="middle" fill="#ffffff"><tspan>1</tspan></text>
<text id="right_corner_text" x="232" y="36" width="48" …推荐指数
解决办法
查看次数
如何使用html5 canvas/javascript/jquery将svg转换为png并保存在服务器上
好吧,我需要一些关于将.svg文件/图像转换为.png文件/图像的帮助......
我的页面上显示了.svg图像.它保存在我的服务器上(作为.png文件).我需要根据需要将其转换为.png文件(单击按钮)并将.png文件保存在服务器上(我将使用.ajax请求执行此操作).
但问题是转换.
我读了很多关于html5 Canvas的东西,这可能有助于做我现在需要做的事情,但是我找不到任何明确的解决方案来解决我的问题,而且,tbh,我不明白我发现的一切......所以我需要一些明确的建议/帮助我必须这样做.
这是"html idea"模板:
<html>
<body>
<svg id="mySvg" width="300px" height="300px">
<!-- my svg data -->
</svg>
<label id="button">Click to convert</label>
<canvas id="myCanvas"></canvas>
</body>
</html>
和一些js:
<script>
$("body").on("click","#button",function(){
var svgText = $("#myViewer").outerHTML;
var myCanvas = document.getElementById("canvas");
var ctxt = myCanvas.getContext("2d");
});
</script>
然后,我需要将svg绘制到Canvas中,获取base64数据,并将其保存在我的服务器上的.png文件中......但是......怎么样？我读到了很多不同的解决方案,我实际上......迷失了...我正在研究jsfiddle,但我实际上......无处可寻...... http://jsfiddle.net/xfh7nctk/6 / ...感谢您的阅读/帮助
推荐指数
解决办法
查看次数
将svg转换为png时添加css样式
我有以下问题:我正在转换由d3.js创建的svg图,但png与svg完全不同.转换前的SVG
转换后的PNG: 
如何将相同的.css代码应用于转换？反正有没有像创建svg那样链接到.css文件？
svgtopng.js代码:
d3.select("#save").on("click", function(){
var html = d3.select('#h3 svg')
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
//HERE I WAS TRYING WITH .style but I want to link all the css classes from .css file below//
.node().parentNode.innerHTML;
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
var img = '<img src="'+imgsrc+'">';
d3.select("#svgdataurl").html(img);
css代码:
body {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
padding-left: 10px;
color: #222;
}
/* Histogram line areas */
.Histogram .line {
shape-rendering: crispEdges;
}
.LineChart .line {
stroke-width: 2px;
}
/* 2D Histogram …推荐指数
解决办法
查看次数
将 SVG 转换为 PNG 时包括字体
我正在尝试生成一些 SVG 并允许我网站的用户将这些 SVG 下载为 PNG。
阅读本文后，我将所有外部图像都包含在下载的 PNG 中。
现在我试图让 PNG 上的字体正确。这似乎回答了这个问题，所以我补充说：
<defs>
<style type="text/css">
@font-face {
font-family: Parisienne;
src: url('data:application/font-woff;charset=utf-8;base64,.....')
}
</style>
</defs>
.....base64 编码的 woff2 字体在哪里。然后在文本中使用它，如下所示：
<text x="55" y="55" stroke="red" font-family="Parisienne">Blah</text>
字体在浏览器中正确显示（我没有在我的操作系统上安装它），但是它仍然没有包含在 PNG 中。
我是否必须向我从第一个链接使用的脚本添加一些额外的处理？
谢谢。
--编辑--
我被要求提供一个完整的例子，这里是：
<svg id="generated-svg" class="generated-svg" width="300px" height="500px"
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns-xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
@font-face {
font-family: Parisienne;
src: url('data:application/font-woff;charset=utf-8;base64,.....')
}
</style>
</defs>
<rect width="300" height="500" fill="#222"/>
<text x="55" y="55" stroke="red" font-family="Parisienne" font-size="20px">Test text</text>
</svg>
我没有添加 …
推荐指数
解决办法
查看次数