Question

现在我正在通过下拉列表选择背景图片。设置背景图像后，我想将此div（包括背景图像）转换为图像。我正在通过html2Canvas将div转换为图像。我想将这个转换后的图像显示为bootstrap模态。单击按钮（Div转换为图像）后，应打开一个包含背景图像的模态。但是当我点击按钮时，它会打开一个空白模态。

我会展示我的代码。

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

password_verify()

JSFiddle

最后，我想以模态显示此转换后的图像。

Answer 1

只需在bootstrap模态方法

下面添加画布输出

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

})

通常模态为空，因此您需要在显示时更改模态内容。

以下小提琴工作正常，但你的画布转换功能返回图像没有背景图像

Js fiddle

Answer 2

此代码无效我认为

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

只是尝试检查html的输出，html没有变化，所以这不会反映在模态中

将div转换为图像，在javascript中以bootstrap模式显示

2 个答案: