1
cssで3Dキューブを作成し、html2canvasで保存しようとすると正しく表示されません。これを達成するための代替方法またはプラグインはありますか？CSS変換3dキューブを画像として保存
私の目標は、回転キューブを保存し、ソーシャルメディアに共有することです。
$(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イメージ 