Сделать Div и это дочерний элемент в изображение в 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> 

Я хочу, чтобы создать файл Jpeg, что DIV # фронт будет появляться в моем экране. Как я буду это делать в 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 просто извлекает файл изображения. Я хотел получить внешний вид моего всего div с идентификатором «front».

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; 

    });