Question

浏览过互联网，但未能找到答案。

我正在构建另一个自定义图像滑块，但需要能够处理正在设置动画的div中的任意html。

一般来说，这不会有问题...这肯定不是我创建的第一个滑块，而且，一般来说，如果我需要漂亮的切片和骰子效果，我会使用一个空的div作为背景内容像其他人一样的形象。如果我必须允许它处理任意html，我会限制效果，或者只是在切片-n-dice转换完成后淡入html内容。

但是，在这种情况下，我需要在同一个滑块中同时使用漂亮的效果和任意HTML。

我最好的想法是如何将任意HTML转换为图像。

我无法在任何地方找到合适的客户端解决方案......但最终意识到我可以将HTML填充到SVG元素中，并且可以使用SVG作为div的背景图像。

（仅供参考，这真的只需要现代浏览器处理，它可以处理SVG和DATA-URLS等）

第一部分实际上很简单：

arbitraryHTML = "<style>div{padding:10px;border:5px solid red;border-radius:10px;width:500px;height:175px}p{text-align:justify;}img{height:50px;float:left;border-radius:5px;margin:10px;}</style><body><div><img src='steve.png'><h1>Arbitrary HTML</h1><p>This allows arbitrary HTML to be turned into an image, and the image is then able to be stuffed into a canvas.  In this case, I will leave this image as an image so that I can set it as a background image of a div that will be visually sliced apart for a slider.</div></body>";
var stuff = document.createElement('svg');
stuff.innerHTML = "<foreignObject>"+arbitraryHTML+"</foreignObject>";
document.body.appendChild(stuff);

如果我只是想将它直接填充到DOM中，这非常合适......但我需要做的是将它用作我正在切片和切割的div的背景图像。

由于我已经拥有SVG代码，因此我应能够将其用作数据uri来提供图像。

I found an example like this on fiddle,并尝试在上面的代码示例中使用此方法将svg填充到背景图像中......到目前为止，我完全没有这样做。

示例：

var i = document.createElement('div');
i.setAttribute("style","background-image:url('data:image/svg+xml,<svg>"+stuff.innerHTML+"</svg>);'");
document.body.appendChild(i);

每次，我都会遇到同样的问题; Chrome控制台没有抛出任何错误或警告，但div只显示完全为空。

使用某些方法（例如上面的代码示例），控制台会正确显示div代码中的数据uri，但仍无法显示背景。

作为错误测试的一部分，我有两个并排...实际的svg元素（显示正常），并且具有相同代码的div卡在背景图像中（不会显示）。因此，我假设我的问题是关于我将svg转换为data-url而不是svg本身的方式。

在此之前我真的没有使用内联SVG或数据URL ...所以我很可能不正确地处理数据URL或SVG，因为我试图使用它们的方式。

不确定我做错了什么，但真的想解决这个问题。

有没有更好的方法将任意HTML转换为我错过的图像？

或者我的想法是如何在正确的轨道上实现这一目标，但实施工作搞砸了？

非常感谢任何帮助。

Answer 1

我猜Chrome仍然有webkit bug。你在做什么应该在Firefox或Opera 12中工作。注意IE9 / 10根本不支持foreignObject，不确定11。

将计算的SVG作为数据URI传递给SRC属性

1 个答案: