Convert div into image, Show in the bootstrap modal in javascript

Question

Right now i am setting a background image from select by dropdown. After set background image i want to convert this div (include background image) into image. I am converting div into image by html2Canvas. And i want to show this converted image into the bootstrap modal. After click on button(Div convert into image) one modal should be open that contains the background image. But when i am clicking the button it opens a blank modal.

I will show my code.

  // for image color var bgArray = [ 'https://d2z4fd79oscvvx.cloudfront.net/0020444_black_forest_cake_205.jpeg', 'https://d2z4fd79oscvvx.cloudfront.net/0019255_profound_love_a_bunch_of_15_red_and_15_white_roses_205.jpeg', 'http://lorempixel.com/400/200/sports/3', 'https://d2z4fd79oscvvx.cloudfront.net/0019255_profound_love_a_bunch_of_15_red_and_15_white_roses_205.jpeg', ] $('#chatroom').on('change', function(){ value = $(this).val() - 1; $('.bgDiv').css({'background-image':'url(' + bgArray[value] + ')'}); }); //DIv into image function ImageCanvas() { html2canvas($("#widget"), { onrendered: function (canvas) { theCanvas = canvas; consoel.log(theCanvas.toDataURL()); document.querySelector('.imageViewcanvas').src = theCanvas.toDataURL(); } }); } 

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <div class="container"> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" onclick="ImageCanvas();" data-toggle="modal" data-target="#myModal">Div convert into image</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content" > <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> <p>Some text in the modal.</p> <span><img class='imageViewcanvas'></span> </div> </div> </div> </div> </div> <!-- for image --> <hr> <div style="width:450px;height:450px;border:2px solid green" class="bgDiv widget" id="widget"> </div> <label for="chatroom">Choose background Image</label> <select size="1" id="chatroom"> <option value="1">Background image3</option> <option value="2">Background image4</option> <option value="3">Background image5</option> <option value="4">Background Image6</option> </select> 

JSFiddle

Finally i want to show this converted image in modal.

Answer 1

just add canvas output inside below bootstrap modal method

$('#myModal').on('shown.bs.modal', function (e) {

})

Normally modal is empty so you need to change modal content when it will going to show.

below fiddle working fine but your canvas convert function return image without background image

Js fiddle

Answer 2

This code is not working I think

function ImageCanvas() {
            html2canvas($("#widget"), {
                onrendered: function (canvas) {
                    theCanvas = canvas;   
                    consoel.log(theCanvas.toDataURL());
                    document.querySelector('.imageViewcanvas').src = theCanvas.toDataURL();
                }
            });
        }

Just try to inspect the output of your html there is no change in the html so this is not reflected in the modal