好吧,我需要一些关于将.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转换为支持字体元素的HTML画布？我已经尝试过canvg,但它不支持Font.
我想在传单地图上渲染大约10.000个标记或点.我已经按常规方式做了,我发现它比Google地图慢一些.我正在寻找一种方法来渲染多个元素而不会出现性能问题.
有没有办法用Leaflet做到这一点？
更新:我不想用无法处理事件的亮点绘图.我想用不同的颜色和事件绘制标记.
我试图将一个大的SVG(它的数据URL大约是750000 - 1000000个字符)转换为PNG,方法是将它的数据url传递到一个图像并进入画布,但图像只加载大约1/4的SVG.
通过创建:
var svg_xml = (new XMLSerializer()).serializeToString(svg),
url = 'data:image/svg+xml;base64,' + btoa(svg_xml);
var img = new Image();
img.width = 730;
img.height = 300;
img.onload = function(){
var canvas = document.create('canvas');
canvas.width = 730;
canvas.height = 300;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 730, 300);
callbackFn(canvas.toDataURL('image/png');
}
img.src = url
编辑
我已经尝试实现canvg来绘制SVG,但DataURL生成的结果为空白图像:
var svg_xml = (new XMLSerializer()).serializeToString(svg);
var canvas = document.createElement('canvas');
canvas.width = 730;
canvas.height = 300;
var ctx = canvas.getContext('2d');
ctx.drawSvg(svg_xml, 0, 0, 730, 300);
callbackFn(canvas.toDataURL('image/png');
我使用过的方法有什么问题吗？ …
为了在画布上显示SVG图像文件,我在HTML上有以下行:
<img id="soundOnImg" src="img/speaker_on.svg" style="display:none"></img>
然后在画布上绘制它:
ctx2d.drawImage($("#soundOnImg")[0], 10, 10, 200, 200);
($()在那里使用jQuery )
除了一个烦恼之外,这完美无缺 - Chrome给了我以下警告:
Resource interpreted as image but transferred with MIME type image/svg+xml.
这个警告意味着什么？
我尝试使用<object>而不是,<img>但这失败,因为对象元素似乎没有[0]出于某种原因.
我怎样才能解决这个问题？
<img>感谢CSS类,我必须应用一些样式.
是否有可能得到dataURL的<img>与CSS样式？
$(function() {
// Original
const imgOriginal = document.getElementById('original');
const c1 = document.getElementById('c1');
let ctx = c1.getContext('2d');
ctx.drawImage(imgOriginal, 100, 100);
// Filtered
const imgFiltered = document.getElementById('filtered');
const c2 = document.getElementById('c2');
ctx = c2.getContext('2d');
ctx.drawImage(imgFiltered, 100, 100);
// Same dataURL :(
console.log(c1.toDataURL(), c2.toDataURL());
console.log(c1.toDataURL() === c2.toDataURL());
}).filter::before {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
border: 1px solid red;
}
.filter {
position: relative;
-webkit-filter: sepia(.5) hue-rotate(-30deg) …