做一个Div，它的子元素是Javascript中的一个图像 [英] Make a Div and it's Child Element's an Image in Javascript

问题描述

我在HTML中有此布局：

 < div id =front> 
< img id =student_frontsrc ='。$ 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＃front会出现在我的屏幕上。我将如何在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的外观。

解决方案

加载html2canvas js文件， this：

< pre（'（'＃'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_frontsrc =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>更多文字< / div>< / div>< button id =btn>点击PIC< / button>< br>< div id =output >< / div>  

图像URL到同一域上的某个内容（html2canvas不加载跨域图像）。

I have this layout in 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>

I want to generate a Jpeg file of what div#front will appear in my screen. How will I do that in Javascript? I have a button that will invoke an action when it is click.

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 just retrieves the image file. I wanted to retrieve the appearance of my whole div with an id "front".

解决方案

Load the html2canvas js file, then add this:

$('#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>

You will need to change the image URL to something on the same domain (html2canvas does not load cross domain images).

这篇关于做一个Div，它的子元素是Javascript中的一个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！