CSS转换3d立方体保存作为图象

Question

我使用css创建一个3d立方体，当尝试使用html2canvas保存它时，它无法正确渲染。是否有任何替代方法或任何插件来实现此目的。

我的目标是保存旋转的多维数据集并在社交媒体上分享。

$(function () {
  $("#show_button").click(function () {
    html2canvas(document.body, {
      onrendered: function (canvas) {
        $("<img/>", {
          id: "image",
          src: canvas.toDataURL("image/png"),
          width: '95%',
          height: '95%'
        }).appendTo($("#show_img").empty());
      }
    });
  });
});
downloadPNG = function () {
  html2canvas(document.body, {
    onrendered: function (canvas) {
      Canvas2Image.saveAsPNG(canvas);
    }
  });
}

body > div {
  width: 350px;
  margin: 50px auto;
}

.container {
  width: 300px;
  height: 300px;
  margin: 60px auto;
  -webkit-perspective: 1100px;
  -webkit-perspective-origin: -50% -50%;
  float: left;
}

.cube {
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translateZ(-150px);
  left: 15%;
  position: relative;
  margin: 0;
  width: 300px;
  height: 300px;
  -webkit-transition: 1s;
}

.cube div {
  width: 298px;
  height: 188px;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  border: 1px solid #fff;
  text-align: center;
  padding-top: 110px;
  color: #fff;
  font: 3em arial;
}

.front {
  -webkit-transform: translateZ(150px);
}

.left {
  -webkit-transform: rotateY(-90deg) translateZ(150px);
}

.right {
  -webkit-transform: rotateY(90deg) translateZ(150px);
}

.top {
  -webkit-transform: rotateX(90deg) translateZ(150px);
}

.bottom {
  -webkit-transform: rotateX(-90deg) translateZ(150px);
}

.back {
  -webkit-transform: rotateY(180deg) translateZ(150px);
}

label {
  cursor: pointer;
  border-radius: 10px;
  padding: 10px;
  background: #f5f5f5;
  float: left;
  text-align: center;
  margin-right: 5px;
}

label:hover {
  background: #eee;
}

input {
  position: absolute;
  left: -9999px;
}

input:checked + label {
  font-weight: bold;
}

input[value="front"]:checked ~ .container .cube {
  -webkit-transform: translateZ(-150px) rotateY(0);
}

input[value="left"]:checked ~ .container .cube {
  -webkit-transform: translateZ(-150px) rotateY(90deg);
}

input[value="right"]:checked ~ .container .cube {
  -webkit-transform: translateZ(-150px) rotateY(-90deg);
}

input[value="top"]:checked ~ .container .cube {
  -webkit-transform: translateZ(-150px) rotateX(-90deg);
}

input[value="bottom"]:checked ~ .container .cube {
  -webkit-transform: translateZ(-150px) rotateX(90deg);
}

input[value="back"]:checked ~ .container .cube {
  -webkit-transform: translateZ(-150px) rotateY(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script src="https://cdn.jsdelivr.net/canvas2image/0.1/canvas2image.min.js"></script>
<script src="https://cdn.jsdelivr.net/canvas2image/0.1/base64.js"></script>
<script src="https://cdn.jsdelivr.net/canvas2image/0.1/canvas2image.js"></script>



<div>
<div style="margin-bottom:40px">
<button id="show_button">Show Image</button>
<a onclick="downloadPNG()" href="">download</a>
</div>
  <input id="front" name="transforms" type="radio" value="front">
  <label for="front">Front</label>

  <input id="left" name="transforms" type="radio" value="left">
  <label for="left">Left</label>

  <input id="right" name="transforms" type="radio" value="right">
  <label for="right">Right</label>

  <input id="top" name="transforms" type="radio" value="top">
  <label for="top">Top</label>

  <input id="bottom" name="transforms" type="radio" value="bottom">
  <label for="bottom">Bottom</label>

  <input id="back" name="transforms" type="radio" value="back">
  <label for="back">Back</label>

  <div class="container">
    <figure class="cube">
      <div class="front">Front</div>
      <div class="left">Left</div>
      <div class="right">Right</div>
      <div class="top">Top</div>
      <div class="bottom">Bottom</div>
      <div class="back">Back</div>
    </figure>
  </div>

</div>
<div id="show_img"></div>

Genrated Image

Answer 1

你可以忘记使用html2canvas，phantomjs或wkhtmltopdf。我还没有找到任何支持css3转换的东西，但是......

您可以先使用imageMagic进行3D操作，然后将其作为新图像传递给html2canvas（如果您有更多内容可以与3D一起渲染）。