javascript - 制作一个 Div,它的子元素是 Javascript 中的图像

原文 标签 javascript jquery html css

我在 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#front 将出现在我的屏幕上的 Jpeg 文件。我将如何在 Javascript 中做到这一点?我有一个按钮,当它被点击时会调用一个 Action 。
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()函数只检索图像文件。我想用 id “front”检索整个 div 的外观。

最佳答案

加载 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 不加载跨域图像)。

关于javascript - 制作一个 Div,它的子元素是 Javascript 中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28803262/

相关文章:

javascript - 使用javascript确定从div顶部到窗口顶部的距离

Jquery $this 或 each() 一次指定一个链接

html - html 标签之外的内容

php - 编辑生成内容的特定部分

javascript - 在Google Piechart中加载数据

jquery - 如何使用 MVC3 Controller 显示 "Message box"

html - Flexbox可在Chrome的表格中使用,但不适用于Mozilla

javascript - AngularJs指令模板不起作用

javascript - 音频阵列缓冲区到音频元素

javascript - 我怎样才能在一个页面上有两个不同的变量? (JQuery)