我一直在尝试将 SVG 图像转换为光栅图像。格式无关紧要，但 png 或 jpg 会很好。
我正在使用 jSignature尝试完成这个。 jSignature 的 API 没有为我点击，但我可以绘制签名并将其发布到 <img src="data:" /> 中。标签。
我一直在阅读 SO 上讨论这个问题的其他线程，我一直在尝试 this approach.但是，我不断从控制台收到“Object [object Object] has no method 'getContext'”错误。
我将使用 PHP 将其传递到数据库。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="sigStyle.css">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jSignature.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var sigdiv = $("#signature").jSignature({'UndoButton':true});
$("#lock").click(function(){
//Lock the canvas, stop user input
});
$("#save").click(function(){
var datapair = sigdiv.jSignature("getData", "svgbase64");
var i = new Image();
i.src = "data:" + datapair[0] + "," + datapair[1];
$(i).appendTo($("#outputSvg"));
});
$("#clear").click(function(){
sigdiv.jSignature("reset");
$("#outputSvg, #outputRaster").empty();
});
$("#raster").click(function(){
var canvas = $("canvas").getContext("2d");
var img = canvas.toDataURL("image/png");
$("#outputRaster").append('<img src="'+img+'"/>');
});
})
</script>
</head>
<body>
<div id="signature"></div>
<br />
<button id="lock">Lock</button>
<button id="save">Save</button>
<button id="clear">Clear</button>
<button id="raster">Raster</button>
<br /><br />
<fieldset id="outputSvg" style="float:left">
<legend>SVG</legend>
</fieldset>
<fieldset id="outputRaster" style="float:left">
<legend>Raster</legend>
</fieldset>
</body>
</html>
如有任何帮助、建议或提示，我们将不胜感激!谢谢!
最佳答案
我想通了!
Canvg允许您将 svg 绘制到 Canvas 上。我在我的页面上制作了一个隐藏的 Canvas 元素。我将我的 jSignature 保存为 SVG/XML 字符串，将其传递给 canvg 进行渲染，然后最终使用隐藏 Canvas 的 .toDataURL() 方法。
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jSignature.min.js"></script>
<script type="text/javascript" src="canvg.js"></script>
<script>
$(document).ready(function(){
var sigdiv = $("#signature").jSignature({'UndoButton':true});
$("#save").click(function(){
var datapair = sigdiv.jSignature("getData", "svg");
var i = new Image();
i.src = "data:" + datapair[0] + "," + datapair[1];
$(i).appendTo($("#outputSvg"));
var canvas = document.getElementById("canvas");
canvg(canvas, datapair[1]);
var img = canvas.toDataURL("image/png");
$("#outputRaster").append("<img src='"+img+"'/>");
});
});
</script>
</head>
<body>
<div id="signature"></div>
<canvas id="canvas" hidden="hidden"></canvas>
<br />
<button id="lock">Lock</button>
<button id="save">Save</button>
<button id="clear">Clear</button>
<button id="raster">Raster</button>
<br /><br />
<fieldset id="outputSvg" style="float:left">
<legend>SVG</legend>
</fieldset>
<fieldset id="outputRaster" style="float:left">
<legend>Raster</legend>
</fieldset>
</body>
</html>
关于javascript - 尝试将 SVG 签名转换为光栅图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13729485/