Message:

I'm trying to capture an image which i am first generating using CSS.

The CSS generated pic is like this..

and the current html2canvas output is...

Current Code i've tried is as follows...

html2canvas(document.querySelector("#capture"), {

  allowTaint: true

}).then(canvas => {

  document.body.appendChild(canvas)

});

body {

  background: #0000007a;

}



h1 {

  font: small-caps 167% Arial, Helvetica, sans-serif

}



#container {

  margin-left: -56px;

  top: 450px;

  width: 550px;

  -moz-perspective: 800px;

  -webkit-perspective: 800px;

  margin-top: 130px;

}



#container:hover * {

  -moz-animation-play-state: paused;

  -webkit-animation-play-state: paused

}



#frame {

  margin-top: 95px;

  width: 23px;

  -moz-transform-style: preserve-3d;

  -webkit-transform-style: preserve-3d;

  /* translate must be last */

  -moz-transform: rotateX(-1deg) rotateY(45deg) rotateZ(0deg) translate3d(325px, -70px, 50px);

  -webkit-transform: rotateX(-1deg) rotateY(45deg) rotateZ(0deg) translate3d(325px, -70px, 50px)

}



.strip {

  -moz-transform-style: preserve-3d;

  -webkit-transform-style: preserve-3d;

  animation: spin 0.01s forwards;

}



.mastercontainer {

  width: 400px;

  height: 400px;

  display: inline-block;

  overflow: hidden;

}



.strip div {

  position: absolute;

  background: #000 url(http://automation.stickermonkey.shop/codeplayground/images/djmug2.jpg);

  border: solid rgb(145, 87, 0);

  border-width: thin 0;

  height: 275px;

  width: 34px;

  opacity: 1;

}



.strip .a {

  background-position: 0 0;

  -moz-transform: rotateY(0deg) translateZ(124px);

  -webkit-transform: rotateY(0deg) translateZ(124px)

}



.strip .b {

  background-position: 759px 0;

  -moz-transform: rotateY(15deg) translateZ(124px);

  -webkit-transform: rotateY(15deg) translateZ(124px)

}



.strip .c {

  background-position: 726px 0;

  -moz-transform: rotateY(30deg) translateZ(124px);

  -webkit-transform: rotateY(30deg) translateZ(124px)

}



.strip .d {

  background-position: 693px 0;

  -moz-transform: rotateY(45deg) translateZ(124px);

  -webkit-transform: rotateY(45deg) translateZ(124px)

}



.strip .e {

  background-position: 660px 0;

  -moz-transform: rotateY(60deg) translateZ(124px);

  -webkit-transform: rotateY(60deg) translateZ(124px)

}



.strip .f {

  background-position: 627px 0;

  -moz-transform: rotateY(75deg) translateZ(124px);

  -webkit-transform: rotateY(75deg) translateZ(124px)

}



.strip .g {

  background-position: 594px 0;

  -moz-transform: rotateY(90deg) translateZ(124px);

  -webkit-transform: rotateY(90deg) translateZ(124px)

}



.strip .h {

  background-position: 561px 0;

  -moz-transform: rotateY(105deg) translateZ(124px);

  -webkit-transform: rotateY(105deg) translateZ(124px)

}



.strip .i {

  background-position: 528px 0;

  -moz-transform: rotateY(120deg) translateZ(124px);

  -webkit-transform: rotateY(120deg) translateZ(124px)

}



.strip .j {

  background-position: 495px 0;

  -moz-transform: rotateY(135deg) translateZ(124px);

  -webkit-transform: rotateY(135deg) translateZ(124px)

}



.strip .k {

  background-position: 462px 0;

  -moz-transform: rotateY(150deg) translateZ(124px);

  -webkit-transform: rotateY(150deg) translateZ(124px)

}



.strip .l {

  background-position: 429px 0;

  -moz-transform: rotateY(165deg) translateZ(124px);

  -webkit-transform: rotateY(165deg) translateZ(124px)

}



.strip .m {

  background-position: 396px 0;

  -moz-transform: rotateY(180deg) translateZ(124px);

  -webkit-transform: rotateY(180deg) translateZ(124px)

}



.strip .n {

  background-position: 363px 0;

  -moz-transform: rotateY(195deg) translateZ(124px);

  -webkit-transform: rotateY(195deg) translateZ(124px)

}



.strip .o {

  background-position: 330px 0;

  -moz-transform: rotateY(210deg) translateZ(124px);

  -webkit-transform: rotateY(210deg) translateZ(124px)

}



.strip .p {

  background-position: 297px 0;

  -moz-transform: rotateY(225deg) translateZ(124px);

  -webkit-transform: rotateY(225deg) translateZ(124px)

}



.strip .q {

  background-position: 264px 0;

  -moz-transform: rotateY(240deg) translateZ(124px);

  -webkit-transform: rotateY(240deg) translateZ(124px)

}



.strip .r {

  background-position: 231px 0;

  -moz-transform: rotateY(255deg) translateZ(124px);

  -webkit-transform: rotateY(255deg) translateZ(124px)

}



.strip .s {

  background-position: 198px 0;

  -moz-transform: rotateY(270deg) translateZ(124px);

  -webkit-transform: rotateY(270deg) translateZ(124px)

}



.strip .t {

  background-position: 165px 0;

  -moz-transform: rotateY(285deg) translateZ(124px);

  -webkit-transform: rotateY(285deg) translateZ(124px)

}



.strip .u {

  background-position: 132px 0;

  -moz-transform: rotateY(300deg) translateZ(124px);

  -webkit-transform: rotateY(300deg) translateZ(124px)

}



.strip .v {

  background-position: 99px 0;

  -moz-transform: rotateY(315deg) translateZ(124px);

  -webkit-transform: rotateY(315deg) translateZ(124px)

}



.strip .w {

  background-position: 66px 0;

  -moz-transform: rotateY(330deg) translateZ(124px);

  -webkit-transform: rotateY(330deg) translateZ(124px)

}



.strip .x {

  background-position: 33px 0;

  -moz-transform: rotateY(345deg) translateZ(124px);

  -webkit-transform: rotateY(345deg) translateZ(124px)

}



@-moz-keyframes spin {

  from {

    -moz-transform: rotateY(360deg)

  }

  to {

    -moz-transform: rotateY(230deg)

  }

}



@-webkit-keyframes spin {

  from {

    -webkit-transform: rotateY(360deg)

  }

  to {

    -webkit-transform: rotateY(230deg)

  }

}

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

<div id="capture" class="mastercontainer">

  <div id="container">

    <div id="frame">

      <div class="strip">

        <div class="a"></div>

        <div class="b"></div>

        <div class="c"></div>

        <div class="d"></div>

        <div class="e"></div>

        <div class="f"></div>

        <div class="g"></div>

        <div class="h"></div>

        <div class="i"></div>

        <div class="j"></div>

        <div class="k"></div>

        <div class="l"></div>

        <div class="m"></div>

        <div class="n"></div>

        <div class="o"></div>

        <div class="p"></div>

        <div class="q"></div>

        <div class="r"></div>

        <div class="s"></div>

        <div class="t"></div>

        <div class="u"></div>

        <div class="v"></div>

        <div class="w"></div>

        <div class="x"></div>

      </div>

    </div>

  </div>

</div>

My Answer:
It looks like the issue might be related to the positioning and size of the elements in your CSS. When using html2canvas to capture an image, it may not always render the elements exactly as they appear on the screen, especially if there are complex transformations involved.

One thing you can try is to simplify the CSS and make sure that the elements are positioned and sized in a more straightforward manner. This can help html2canvas to capture the image more accurately.

Additionally, you can try adjusting the `width` and `height` properties of the `.mastercontainer` and `.strip` elements to see if that helps with capturing the image correctly.

If the issue persists, you may need to experiment with different CSS configurations or consider using a different approach to capture the image, such as using a server-side solution or a different library.

Rate this post

5 of 5 based on 7864 votes

John Davidson

php - Capturing an image wrapped around a mug with css using html2canvas results cut up

Rate this post

Comments