轉換成DIV圖像，顯示在JavaScript的

引導模式現在我從選擇通過下拉菜單設置背景圖片。設置背景圖像後，我想將此div（包括背景圖像）轉換爲圖像。我通過html2Canvas將div轉換爲圖像。我想將這個轉換後的圖像顯示到bootstrap模式中。點擊按鈕（Div轉換爲圖像）後，應打開一個包含背景圖像的模式。但是當我點擊按鈕時，它會打開一個空白模式。轉換成DIV圖像，顯示在JavaScript的

我會告訴我的代碼。

// for image color  
 
var bgArray = [ 
 
    \t \t '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; 
 
\t $('.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

最後我想說明這個轉換圖像模式。

來源

2016-03-01 V SH

只是裏面添加下面的引導模態法帆布輸出

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

})

通常模式是空的，所以你需要改變模式的內容時，它會去展示。

下面撥弄工作正常，但

Js fiddle

來源

2016-03-01 12:18:24 Muthu

此代碼不能正常工作，我認爲

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

試試看檢查你的HTML的輸出沒有背景圖像畫布轉換函數返回的圖像html中沒有改變，所以這並不反映在模態

來源

2016-03-01 12:21:56 dsk

轉換成DIV圖像，顯示在JavaScript的

回答

相關問題