/ / Javascript & Jquery / Comments (7)

Convert html to image using JavaScript Canvas

Đã bao giờ bạn nghĩ tới việc sẽ xuất các phần từ html thành 1 file ảnh chưa?trong bài viết này mình sẽ hướng dẫn các bạn làm việc này.Để thực hiện được bài này chúng ta sẽ sử dụng thư viện html2canvas (JavaScript Canvas).Nào hãy cùng đi vào các ví dụ để dễ hiểu hơn nhé.

Xem demo

Xem demo

Xuất các phần từ html thành file ảnh

– Mình có file index.php với nội dung sau:

<div id="export_image">
       <h1 style="color:red">Convert html to image using canvas</h1>
       <?php
        $lists = array(
                     array(
                        'name' => 'Nobita',
                        'email' => 'nobitacnt@gmail.com',
                        'phone' => '0123.456.789',
                     ),
                     array(
                        'name' => 'Xuka',
                        'email' => 'xuka@gmail.com',
                        'phone' => '0222.333.444',
                     ),
                    array(
                        'name' => 'Chaien',
                        'email' => 'chaien@gmail.com',
                        'phone' => '0111.333.444',
                    ),
        )
        ?>
        
        <img alt="" src="test.jpg" style="margin:10px 0px">
        
        
        <table border="1">
            <thead>
                <tr>
                    <td>Tên</td>
                    <td>Email</td>
                    <td>Số điện thoại</td>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($lists as $row):?>
                <tr>
                    <td><?php echo $row['name']?></td>
                    <td><?php echo $row['email']?></td>
                    <td><?php echo $row['phone']?></td>
                </tr>
                <?php endforeach;?>
            </tbody>
        </table>   
</div>
<br/>
<form method="POST" enctype="multipart/form-data" action="export.php" id="myForm">
   <input type="hidden" name="img_val" id="img_val" value="" />  
</form>

<button id="save_image">Lưu thành file ảnh</button>

– Các bạn chú ý trong nội dung trên mình có thẻ <div id="export_image"> và form có id ="myForm",mục đích của mình sẽ xuất toàn bộ nội dung trong thẻ div id="export_image" thành 1 file ảnh.

– Và kết quả sẽ như sau:

export html to image

export html to image

– Tiếp theo chúng ta sẽ load thư viện html2canvas vào sử dụng

<script type="text/javascript" src="build/html2canvas.js"></script>
<script type="text/javascript">
$('document').ready(function(){
	$("#save_image").click(function(){
		 html2canvas($('#export_image'), {
	            onrendered: function(canvas) {
	            	$('#img_val').val(canvas.toDataURL("image/png"));
	                //Submit the form manually
	                document.getElementById("myForm").submit();
	            }
	        });
    });
});
</script>	

– Và cuối cùng là file export.php với nội dung sau:

<?php
// Xu ly form
if (isset($_POST['img_val']))
{
    $img_val = $_POST['img_val'];

    //Get the base-64 string from data
    $filteredData = substr($img_val, strpos($img_val, ",")+1);

    //Decode the string
    $unencodedData = base64_decode($filteredData);

    //Save the image
    $url = 'upload/export_image.png';
    file_put_contents($url, $unencodedData);
    
    //notice this content-type, it will force a download since browsers think that's what they should do with .exe files
    header('Content-Description: File Transfer');
    header("Content-type: application/octet-stream");
    header("Content-disposition: attachment; filename= export_image.png");
    readfile($url);
}

Và kết quả khi các bạn click vào nút lưu thành file ảnh là:

Convert html to image using canvas

Convert html to image using canvas

Như vậy là chúng ta đã thực hiện chuyển khối html lưu thành định dạng file ảnh rồi đó,thật đơn giản phải không nào,chúc các bạn có thể áp dụng tốt vào dự án của mình cho các mục đích khác nhau
Tải mã nguồn của bài viết tại đây:http://ouo.io/u3frEU



08/05/2015
Tags:
Written by nobitacnt

Trong bài viết không tránh khỏi những câu từ chưa chính xác,mong nhận được sự góp ý để website hoàn thiện hơn.Nếu thấy bài viết có ích với bạn hãy like và share để ủng hộ nhé :D.

Bài viết chùng chuyên mục

7 Comments

  1. Minh Hung says:
     /  Reply

    Hình như hình ảnh có vẻ không được nét như hiển thị html

    • nobitacnt says:
       /  Reply

      Uhm,đúng rồi bạn ah,nó không được nét như hiển thị html đâu

  2. Huy says:
     /  Reply

    Tại sao mình để css background-image: url(‘link ảnh’); cho #export_image thì nó chuyển ko có ảnh nền nhỉ ?

    • nobitacnt says:
       /  Reply

      Mình vấn chạy được bình thường mà bạn,ví dụ:

      <div id="export_image" style="background: url('test.jpg')">

      ,bạn thử lại xem

  3. PHUC says:
     /  Reply

    Xin chào nobitacnt
    Cho hỏi làm sao xuất ra file ảnh theo kích thước mình ấn định (chiều cao – chiều rộng).
    Cám ơn

    • Hoàng văn Tuyền says:
       /  Reply

      bạn cấu hình chiều cao và chiều rộng cho thẻ div bạn muốn xuất ra file ảnh

  4. PHUC says:
     /  Reply

    Cám ơn bạn Hoàng văn Tuyền đã trả lời.
    Mình có một ứng dụng giống như vậy nhưng nó save hình ảnh lên host, mình muốn hiển thị đường dẫn ảnh đã save (Link trực tiếp) và hình ảnh đó (Xem hình đã tải) thì làm như thế nào? rất mong được bạn hướng dẫn. Nếu có thể, bạn làm xong post lại ứng dụng nhé!
    Cám ơn bạn rất nhiều.
    http://www70.zippyshare.com/v/Ut6cPKpB/file.html

Gửi bình luận

Giới thiệu

Mình tạo ra blog này với mong muốn chia sẻ và học hỏi kinh nghiệm trong quá trình thiết kế website. Website đang trong quá trình phát triển chân thành cảm ơn mọi sự góp ý của các bạn để làm cho website ngày càng hoàn thiên.

DMCA.com Protection Status
Theo dõi qua Email

Tổng hợp các bài viết về

Hoc php - CodeIgniter Framework - Laravel Framework - PHP va MYSQL