将 div 转换为图片，在 JavaScript 中在 Bootstrap Modal 中显示

Question

现在我正在通过下拉菜单设置背景图片。在设置了背景图片之后，我想将这个div（包括背景图片）转换为图像。我使用html2Canvas将div转换为图像。我希望将这个转换后的图像显示在bootstrap模态框中。 点击按钮（Div转换为图像）后，应该打开一个包含背景图片的模态框。 但是当我点击按钮时，它会打开一个空白的模态框。

下面是我的代码：

  // 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

最后，我想在模态框中展示这张转换后的图片。

- Varun Sharma

Answer 1

只需在下面的Bootstrap模态框方法中添加画布输出即可。

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

})

通常情况下，模态框是空的，因此当它要显示时，您需要更改模态框内容。

下面的fiddle运行良好，但您的画布转换函数返回没有背景图像的图像。

Js fiddle

- Muthu

Answer 2

这段代码好像不起作用了

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

尝试检查您的HTML输出，HTML中没有任何更改，因此在模态框中不会反映出来。

- dsk