0

I want to save div as image I have div contain Camera shot and 360 image I try html2canavas and this does not work. it shows nothing .

function Take(){               
  html2canvas(document.body).then(canvas => {
      document.body.appendChild(canvas)
  });
}
<body>

  <div id="con">
      <div id="div" style="width: 400px;height: 400px;" >
  <div
  id="cat"
  style="position: absolute;top:50px;left:  25px;"
  class="cloudimage-360"
  data-folder="cats/"
  data-filename="{index}.png"
  data-amount="30"
  data-magnifier="2"
  ></div>
  </div>
      <div id="camera" style="position: absolute;top:10px;left:  25px"></div>
  </div>

      <br><br><br>
  <button onclick="Add()" style="margin-top: 40px">+</button>
      <button onclick="Moin()">-</button>
      <br>
                 <button onclick="Up()">Up</button>
  <br>
      <button onclick="Right()" >Right</button>
          <button onclick="Left()" > Left </button>
      <br>
          <button onclick="Down()" > Down </button>
      <button onclick="Take()">Take</button>
  <canvas id="myCanvas"></canvas>
</body>

The problem is it shows nothing when I press Take Here my page [Image Of my page] 1
Here When I press Take it's create canvas with only button without the images

image about canavas created
Project link in jsfiddle

Ali Esmailpor
  • 1,209
  • 3
  • 11
  • 22
Houssem Neuer
  • 11
  • 5
  • what does "it shows nothing" mean? Does it remove the div? Does it insert a canvas but it's blank, etc. etc.? Open your dev tools, and please update your post to explain what _actually_ happens =) – Mike 'Pomax' Kamermans Mar 13 '21 at 01:33
  • yes it's insert blanc canavas – Houssem Neuer Mar 13 '21 at 01:37
  • 1
    No really, please [update your post](/help/how-to-ask). Explain what you _actually_ see happening by saying "I ran this code, it starts as ..., I click .., then dev tools shows that ..., where the documentation (here) suggests that ... ": explain it like we're 5, so that all the details are there, and we can point you to exactly what you're doing wrong (and in which context). – Mike 'Pomax' Kamermans Mar 13 '21 at 01:43
  • Done , i upload it – Houssem Neuer Mar 13 '21 at 01:58
  • 1
    That still doesn't tell us what the actual DOM is: in dev tools, in the "inspector" tab, what is the tree structure before, and what is the tree structure after? Because the image you're showing sure looks like a real canvas element, just one without anything drawn on it: does the console tab show any errors? Also, help yourself out and use a stylesheet that gives canvas elements a background color, so you can tell it's there. Remember, you're debugging, make things _super_ obvious for yourself. – Mike 'Pomax' Kamermans Mar 13 '21 at 02:04
  • console not show any error – Houssem Neuer Mar 13 '21 at 02:54

1 Answers1

0

Actually if you read your script ,it says that select html component which has id as camera (document.querySelector("#camera").
And then append this as a html canvas in body of html (document.body.appendChild(canvas)).

But in your code there is nothing defined inside div with id camera :

<div id="camera" style="position: absolute;top:10px;left:  25px"></div>

So, you need to put some text/image or whatever you want to take screenshot of inside that div. And then it would add it in a canvas in html's body.

If you want to add canvas inside a div then add below lines in html and js can be used:

<div id="addCanvasInside"></div>  

 document.querySelector("#addCanvasInside").appendChild(canvas);

This is jsfiddle working example : http://jsfiddle.net/abhinav3414/6vqdsbr4/13/
Hope it solves your problem.

Edit:

With the fiddle you have attached, with your webcamjs component your div now contains a video element :
enter image description here

And for now, I think html2Canvas cannot generate screenshot from a video component in html, please refer below :
How to take screenshot of a div which contains video and canvas?


Also, You can take a copy of the current video and store it in a canvas element using the drawImage() function.
Please refer below for solution :
How to take a snapshot of HTML5-JavaScript-based video player?

abhinav3414
  • 946
  • 3
  • 9
  • 31