0

I have been looking for an answer on how to save a div as an image when I click save. I have looked everywhere but I cant seem to find an answer, I am using DIV and a preview button to convert the div into an image. The closest thing that i found to save as an image was http://jsfiddle.net/epistemex/kyjs655r/ this is close to what i need to save as an image, but the problem is that this is canvas and its not working with my code this is very similar to what I have my code is messy this is very similar https://jsfiddle.net/8ypxW/3/ I would like to integrate the save from the first URL to the second URL.

This is my script it is similar to the second URL

$(function() { 
  var element = $("#firstshirt"); // global variable
  var getCanvas; // global variable

  $("#btn-Preview-Image").on('click', function () {
    html2canvas(element, {
      allowTaint: true,
      logging: true,
      onrendered: function (canvas) {
        $("#previewImage").append(canvas);
        getCanvas = canvas;
      }
    });
  });
});

var myform = document.getElementById('myform');
myform.onsubmit = function(e) { /* do some validation on event here */ };
$("#wrapper").hover(function() {
  $("#boxes").css("border-color", "red");
},
                    function() {
  $("#boxes").css("border-color", "transparent");
});
.container {
  background-color: transparent;
  width: 490px;
  height: 500px;
  border: 2px solid;
  position: relative;
  overflow: hidden;
  /* Will stretch to specified width/height */
  background-size: 490px 500px;
  background-repeat: no-repeat;
}
.container5 {
  background-color: transparent;
  width: 220px;
  height: 320px;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid red;
  position: absolute;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<center>
  <div id="firstshirt" class="container" style="float:left;">
    <center><div id="wrapper"><div id="boxes" class="container5" style="float:center;">
      <div data-bind="foreach:items" class="fix_backround">
        <div class="item" data-bind="draggable:true,droppable:true">
          <center>
            <span id="texter" class="text" data-bind="text:$data"></span>
            <input class="edit_text"/>
          </center>
        </div>
      </div>

      <a href="" download>
        <span id="image" class="preview-area"></span>
      </a>
      </div>
      </div>
    </center>
    <br><br><br><br>
  </div>
</center>
<br/>
</center>
</div>
</div>
<center>
  <div id="previewImage">
  </div>
</center>

The above code is supposed to have an image but I didn't want to add it because that will need more code I want to keep it short and simple inside their is a text box and I want to save the whole div as an image on click just like the first URL

Ashish Bahl
  • 1,482
  • 1
  • 18
  • 27
xcalliber
  • 305
  • 2
  • 6
  • 16
  • try using html2canvas library which helps in converting a specific markup to a canvas and then write a method to convert this canvas to image and download with the same existing logic – Rajendra kumar Vankadari Dec 14 '16 at 03:56

2 Answers2

0

There is several same questions in SO. Saving Div Contents or Canvas as Image How to take screenshot of a div with JavaScript? One way of doing it is using canvas. Working solution is http://html2canvas.hertzen.com/

Here you can see some working examples of using this library

Community
  • 1
  • 1
Deepak
  • 1,373
  • 2
  • 10
  • 31
0

Use this library. ..

https://html2canvas.hertzen.com

Now just select the element and size.. it will take a snapshot as image..

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  },
  width: 300,
  height: 300
});
Atul Sharma
  • 9,397
  • 10
  • 38
  • 65