js截取html或div生成base64图片编码

   

   

   

   

   

        $(document).ready( function(){

            $(".example1").on("click", function(event) {

                // var showObject = $("#showImages");

                event.preventDefault();

                html2canvas($("#showImages2"), {

                    allowTaint: true,

                    taintTest: false,

                    onrendered: function(canvas) {

                        debugger;

                        canvas.id = "mycanvas";

                        //document.body.appendChild(canvas);

                        //生成base64图片数据

                        var dataUrl = canvas.toDataURL();

                        var newImg = document.createElement("img");

                        newImg.src =  dataUrl;

                        // document.getElementById("showImages");

                        $(".showImagesID").append(newImg);

                    }

                });

            });

        });

   

Hello!

    计算机天堂测试html5页面截图

   
jsjtt.com

  显示样式sdsdfdsf

    巩师傅师傅说

生成界面如下:


实例代码含有解决截图不全问题:

function expWordZip(event){

    // var showObject = $("#showImages");

    event.preventDefault();

    //$(".orgchart l2r")

    //document.getElementsByClassName("claro")

    //document.getElementById("chart-container")

    //获取节点高度,后面为克隆节点设置高度。

    //    var imaNode = $("#chart-container");


    //获取当前页面iframe中要渲染的最好节点div

    var imaNode = window.top.document.getElementById(iframeNodeId).contentWindow.document.getElementById(imagePicId);


    //获取图像有实际高度的节点div目的是获取所渲染图像的真实高度

    var imaDom = window.top.document.getElementById(iframeNodeId).contentWindow.document.getElementsByClassName(imageDomClassName);


    //js对象转换成jquery对象如下,为的是使用jquery方法,jquery对象转换成js对象是 js对象:jsDom = jqueryDom[0]

    var imaDomJs = $(imaDom);

    var imageNodeJs = $(imaNode);

    var imageNodeJsHeight =  imageNodeJs.height();

    var imageNodeJsWidth = imageNodeJs.width();

    //克隆节点,默认为false,不复制方法属性,为true是全部复制。

    var copyDom = imageNodeJs.clone(true);

    //设置克隆节点的css属性,因为之前的层级为0,我们只需要比被克隆的节点层级低即可。

    //copyDom.width(imageNodeJs.width() + "px");


    //设置渲染图像的真实高度,不适用复制直接改变元素的高度


    copyDom.width(imaDomJs.outerHeight(true) + "px");

    copyDom.height(imaDomJs.outerWidth(true) + "px");

    copyDom.css({"background": "white"});

    //将克隆节点动态追加到body后面。

    $("body").append(copyDom);

    html2canvas(copyDom, {

        allowTaint: true,

        taintTest: false,

        onrendered: function(canvas) {

            canvas.id = "mycanvas";

            //生成base64图片数据

            var dataUrl = canvas.toDataURL();

            //var newImg = document.createElement("img");

            //newImg.src =  dataUrl;

            // document.getElementById("showImages");

            //document.body.appendChild(newImg);

            copyDom.remove();

            if(dataUrl){

                $.ajax(

                        {

                            type : "post",

                            url : ctx+fileDisposeUrl,

                            data: {"ajbh":ajbh,"imageCode":dataUrl},

                            success : function (result){

                                var resultData = JSON.parse(result);

                                //alert(resultData.msg);

                                var address = resultData.address;

                                var fileWordName = resultData.fileWordName;

                                var url = ctx+fileDownloadUrl+fileWordName;

                                var method = "post";

                                downWordFile(url, method, address, fileWordName);

                            }

                        });

            }

        }

    });


}

function downWordFile(url, method, address, fileWordName){

    debugger;

    $('

' +  // action请求路径及推送方法

                '' + // 文件路径

                '' + // 文件名称

            '

').appendTo($("body")).submit().remove();


}

克隆后设置属性恢复

你可能感兴趣的:(js截取html或div生成base64图片编码)