做一個事業部和它的子元素在Javascript

Question

的圖片我有這樣的佈局HTML：

<div id="front"> 
    <img id="student_front" src="' . $path . '/images/student_front.jpg"></img> 
    <img id="myid_info_photo"></img> 
    <div id="myid_info_college">CEIT</div> 
    <div id="myid_info_idnumber">101-03043</div> 
    <img id="myid_info_signature"></img> 
    <div id="myid_info_course">BSCS</div> 
    <div id="myid_info_name">Alyssa E. Gono</div> 
    <div id="myid_info_barcode"></div> 
</div> 

我想產生什麼的div＃前會出現在我的屏幕上的JPEG文件。我將如何在Javascript中做到這一點？我有一個按鈕，它會在點擊時調用一個動作。

function myid_print_id() { 
    win = window.open(document.getElementById("student_front").src,"_blank"); 
    win.onload = function() { 
     win.print(); 
    } 
} 

$('#myid_print_id').on('click', function(e) { 
    e.preventDefault(); 
    myid_print_id(); 

}); 

myid_print_id（）funtion只是檢索圖像文件。我想用id「front」來檢索整個div的外觀。

Answer 1

裝入html2canvas js文件，再補充一點：

$('#btn').click(function() { 
 
    html2canvas($('#front'), { 
 
    onrendered: function(canvas) { 
 
     myImage = canvas.toDataURL("image/png"); 
 
     $('#output').append(canvas); 
 
    } 
 
    }); 
 
});

#output { 
 
    border: 1px solid #888888; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> 
 
<div id="front"> 
 
    <img id="student_front" src="http://lorempixel.com/400/200"> 
 
    <div id="myid_info_college">CEIT</div> 
 
    <div id="myid_info_idnumber">101-03043</div> 
 
    <div id="myid_info_course">BSCS</div> 
 
    <div id="myid_info_name">Alyssa E. Gono</div> 
 
    <div id="myid_info_barcode">More text</div> 
 
</div> 
 
<button id="btn">CLICK FOR PIC</button> 
 
<br> 
 
<div id="output"></div>

您將需要將圖像URL更改爲相同域中的某個內容（html2canvas不會加載跨域圖像）。

Answer 2

的Html

<div> 
    <input type="button" id="btnGenerateImage" value="Generate Image" /> 
</div> 


<div> 
    <canvas id="myCanvas"></canvas> 
</div> 
<div> 
    <h1> 
     Generated Content</h1> 
    <img id="canvasImg" alt="Right click to save me!"> 
</div> 

SCRIPT

$("#btnGenerateImage").on('click', function() { 
     var canvas = document.getElementById('myCanvas'); 

     // save canvas image as data url (png format by default) 
     var dataURL = canvas.toDataURL(); 

     // set canvasImg image src to dataURL 
     // so it can be saved as an image 
     document.getElementById('canvasImg').src = dataURL; 

    });