Html2canvas chưa hiển thị

Question

Nội dung chính Show

Html2canvas is what
Conversation browser
Cài đặt
Thẩm khao

Nội dung chính Hiển thị

Đã đăng vào ngày 25 tháng 12 năm 2016 8. 28 CH 1 phút đọc 1 phút đọc

Html2canvas is what

html2canvas là một thư viện javascript nhỏ cung cấp khả năng chụp ảnh màn hình một phần hoặc toàn bộ trang web. đây là điều gần như bất khả thi trước khi html2canvas ra đời
Với những hình ảnh html2canvas được hiển thị dưới dạng base64. Bạn có thể sử dụng để lưu bản xem trước ảnh về một thành phần nào đó
Nhược điểm của html2canvas là chỉ hỗ trợ các trình duyệt hỗ trợ CSS3 và HTML5. Ngoài ra việc render image cũng đôi khi còn có thể gây ra cash browser với những DOM có quá nhiều thành phần phức tạp

Conversation browser

firefox 3. 5+
Google Chrome
Opera 12+
IE9+
Safari 6+

Cài đặt

You can get source at here. https. //github. com/niklasvh/html2canvas
Hoặc có thể sử dụng cdn như sau

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">script>
<script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js">script>

Use

html2canvas rất dễ sử dụng

html2canvas(element, options);

Phần tử là DOM mà bạn muốn tạo kết xuất ảnh
html2canvas support the following option

Hướng dẫn html2canvas html to image - html2canvas html thành hình ảnh

Ví dụ

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">script>
        <script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js">script>
    head>
    <body>
        <div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;padding-left: 25px; padding-top: 10px;">
            <strong>Hello html2canvasstrong><hr/>
            <h3 style="color: #3e4b51;">
                Html to canvas, and canvas to proper image
            h3>
            <p style="color: #3e4b51;">Hello html2canvasp>
        div>
        <input id="btn-Preview-Image" type="button" value="Preview"/>
        <a id="btn-Convert-Html2Image" href="#">Downloada>
        <br/>
        <h3>Preview :h3>
        <div id="previewImage">div>
        <script>
            $(document).ready(function(){
            var element = $("#html-content-holder"); // global variable
            var getCanvas; // global variable
                $("#btn-Preview-Image").on('click', function () {
                     html2canvas(element, {
                     onrendered: function (canvas) {
                            $("#previewImage").append(canvas);
                            getCanvas = canvas;
                         }
                     });
                });
                $("#btn-Convert-Html2Image").on('click', function () {
                var imgageData = getCanvas.toDataURL("image/png");
                var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
                $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
                });

            });
        script>
    body>
html>

This is results after click button PreivewPreivew

Hướng dẫn html2canvas html to image - html2canvas html thành hình ảnh

Thẩm khao

http. //html2canvas. hertz. com/

Đã đăng ký Bản quyền

programming html

Html2canvas chưa hiển thị

Html2canvas is what

Conversation browser

Cài đặt

Use

Ví dụ

Thẩm khao

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội