相关疑难解决方法(0)
将包含 SVG 元素的 HTML 转换为图像文件
我正在尝试将 html 代码转换为图像文件（png、jpg 等）。但是，我尝试过的所有方法都不起作用，因为我的 HTML 代码具有这样的 SVG 元素：
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 150.000000 150.000000" preserveAspectRatio="xMidYMid meet" class="img30p icon-main-color">
<g transform="translate(0.000000,150.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M572 1430 c-233 -62 -408 -227 -490 -459 -24 -69 -27 -89 -27 -221 0 -132 3 -152 27 -221 39 -110 92 -194 172 -275 81 -80 165 -133 275 -172 69 -24 89 -27 221 -27 132 0 152 3 221 27 110 39 194 92 275 172 80 81 133 165 172 …推荐指数
解决办法
查看次数
html2canvas 忽略我的 svg 元素
我尝试打印页面的屏幕，然后将其保存到 中base64，效果很好，但看起来svg元素被忽略，并且某些css样式效果不好，例如:before和:after，原始页面看起来 -
但转换后看起来像这样 -
您可以看到右侧的圆圈:before被忽略，顶部菜单中的箭头和:after选项卡上的箭头以及添加新选项卡按钮 (+) 相同。我的转换代码看起来 -
printOnePage(){
document.getElementById('helpPage').style.display= 'none';
let page = document.getElementById('appContainer');
html2canvas(page,{
onrendered: function(canvas) {
$('#img_val').val(canvas.toDataURL("image/png"));
console.log(document.getElementById('img_val'));
//document.getElementById("phpSendForm").submit();
}
});
document.getElementById('helpPage').style.display= '';
}
有什么提示可能会导致这种情况吗？
推荐指数
解决办法
查看次数
访问canvas.ToBlob()异步函数之外的blob值
我正在使用HTMLCanvas返回async toBlob()函数外部的blob对象的元素.此函数不返回输出值,因此我尝试在外部声明变量并通过命令访问它.
我如何使用JS Promise这种情况？
var myblob;
canvas.toBlob(function(blob) {
myblob = blob;
console.log("inside " + myblob); // getting value after the console outside
})
console.log( "outside " + myblob); // getting undefined 推荐指数
解决办法
查看次数
将 SVG 分享到 Facebook
用户自定义 SVG，当他们满意时，我想给他们在 Facebook 上共享图像的选项。
我知道 Facebook 不接受 SVG，因此，在阅读此问题后，我想出了以下使用canvg：
var svgText = "<svg>" + $("#canvas2").html() + "</svg>";
canvg(document.getElementById('drawingCanvas'), svgText);
var img = document.getElementById('drawingCanvas').toDataURL("image/png");
尽管命名.toDataURL，img不是那么URL（至少，我不认为这是），但> 10,000个字符的字符串，与众生data:image/png;base64,...。
如果我然后尝试允许用户在 Facebook 上共享 PNG，
window.FB.ui({
href: "https://dna.land",
method: 'feed',
name: 'name',
link: "dna.land",
picture: img,
caption: 'mywebsite.com',
description: "description",
message: "message"
}, function(response) {});
我得到的错误消息是“参数href”是必需的（我显然正在提供......可能img太长并且JSON被截断？），尽管我也看到我没有提供有效的URL为picture。
如何在 Facebook 上分享图像数据？
如果无法使用 PNG 的原始 base 64 编码来做到这一点，我不反对将 PNG 文件临时存储在服务器上。但是，理想情况下，我只会存储 24 小时、几个月或一些小的时间跨度，然后可以在用户的帖子不消失的情况下将其删除。那可能吗？
推荐指数
解决办法
查看次数
将jQuery SVG转换为图像
我正在使用jQuery SVG插件生成SVG对象.问题是如何在脚本中将其转换为图像.
我的脚本如下:
<html>
<head>
<script type="text/javascript" src="jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript">
$(function(){
$("#draw").click(function(){
$('#svg_container').svg();
svg = $('#svg_container').svg('get');
svg.clear(true);
svg.circle(200, 220, 150, {fill: "red", stroke: "blue", strokeWidth: 5});
alert(svg.toSVG()); //this prints svg source of the generated image, i.e. circle
});
});
</script>
</head>
<body>
<div id="svg_container" style="position: absolute; left: 100px; top: 100px; width: 400px; height: 400px; border: thin solid #4297D7;"></div>
<button id="draw">Draw</button>
</body>
</html>
你能告诉我如何将这个svg转换成任何类型的图像吗？
提前致谢.
UPDATE
问题解决了,我已将解决方案作为答案发布,请在此处查看.
推荐指数
解决办法
查看次数
如何显示/下载RaphaelJs画布作为图像(png/gif)？
如何让用户下载用RaphaelJs生成的图像？我会优先将它显示在HTML上,<img>以便他们可以右键单击图像以将其保存到桌面.
推荐指数
解决办法
查看次数
修改svg后，使用javascript将svg转换为png
我有一个SVG，我正在使用下面的JavaScript代码转换为PNG
$(".exportImageButton").on("click",function(){
var svg = document.querySelector( "svg" );
var svgData = new XMLSerializer().serializeToString( svg );
var canvas = document.createElement( "canvas" );
var svgSize = svg.getBoundingClientRect();
canvas.width = svgSize.width * 3;
canvas.height = svgSize.height * 3;
canvas.style.width = svgSize.width;
canvas.style.height = svgSize.height;
var ctx = canvas.getContext( "2d" );
ctx.scale(3,3);
var img = document.createElement( "img" );
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData))) );
img.onload = function() {
ctx.drawImage( img, 0, 0 );
var canvasdata = canvas.toDataURL("image/png",1);
var pngimg = '<img src="'+canvasdata+'">';
d3.select("#pngdataurl").html(pngimg);
var …推荐指数
解决办法
查看次数