Question

你好javascript大师:) 我正在开发一个项目，我正在使用javascript代码来获取网站的截图。屏幕截图工作正常，并在页面上很好地呈现。我想要做的不是在页面上显示它，我想用屏幕截图显示“另存为”弹出窗口。以下是在页面上显示图像的当前代码：

<script type="text/javascript"> 

    var date = new Date();
    var message,
    timeoutTimer,
    timer;

    var proxyUrl = "http://html2canvas.appspot.com";

    function addRow(table,field,val){
        var tr = $('<tr />').appendTo( $(table));

        tr.append($('<td />').css('font-weight','bold').text(field)).append($('<td />').text(val));



    }

    function throwMessage(msg,duration){

        window.clearTimeout(timeoutTimer);
        timeoutTimer = window.setTimeout(function(){
            message.fadeOut(function(){
                message.remove();   
            });                   
        },duration || 2000);
        $(message).remove();
        message = $('<div />').html(msg).css({
            margin:0,
            padding:10,
            background: "#000",
            opacity:0.7,
            position:"fixed",
            top:10,
            right:10,
            fontFamily: 'Tahoma' ,
            color:'#fff',
            fontSize:12,
            borderRadius:12,
            width:'auto',
            height:'auto',
            textAlign:'center',
            textDecoration:'none'
        }).hide().fadeIn().appendTo('body');
    }

    $(function(){

        $('ul li a').click(function(e){
            e.preventDefault();
            $('#url').val(this.href);
            $('button').click();                  
        })

        var iframe,d;




        $('input[type="button"]').click(function(){
            $(iframe.contentWindow).unbind('load');
            $(iframe).contents().find('body').html2canvas({
                canvasHeight: d.body.scrollHeight,
                canvasWidth: d.body.scrollWidth,
                logging:true

            });             

        });

        $('button').click(function(){

            $(this).prop('disabled',true);
            var url = $('#url').val();
            $('#content').append($('<img />').attr('src','loading.gif').css('margin-top',40));

            var urlParts = document.createElement('a');
            urlParts.href = url;

            $.ajax({
                data: {
                    xhr2:false,
                    url:urlParts.href

                },
                url: proxyUrl,
                dataType: "jsonp",
                success: function(html){


                    iframe = document.createElement('iframe');
                    $(iframe).css({
                        'visibility':'hidden'
                    }).width($(window).width()).height($(window).height());
                    $('#content').append(iframe);
                    d = iframe.contentWindow.document; 

                    d.open();

                    $(iframe.contentWindow).load(function(){

                        timer = date.getTime();

                        $(iframe).contents().find('body').html2canvas({
                            canvasHeight: d.body.scrollHeight,
                            canvasWidth: d.body.scrollWidth,
                            logging:true,
                            proxyUrl: proxyUrl,
                            logger:function(msg){
                                $('#logger').val(function(e,i){
                                    return i+"\n"+msg;
                                });

                            },
                            ready: function(renderer) {
                                $('button').prop('disabled',false);
                                $("#content").empty();               
                                var finishTime = new Date();

                                var table = $('<table />');  
                                $('#content')
                                .append('<h2>Screenshot</h2>')
                                .append(renderer.canvas)
                                .append('<h3>Details</h3>')
                                .append(table);



                                addRow(table,"Creation time",((finishTime.getTime()-timer)/1000) + " seconds");
                                addRow(table,"Total draws", renderer.numDraws);
                                addRow(table,"Context stacks", renderer.contextStacks.length);
                                addRow(table,"Loaded images", renderer.images.length/2);
                                addRow(table,"Performed z-index reorder", renderer.needReorder);
                                addRow(table,"Used rangeBounds", renderer.support.rangeBounds);



                                throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)/1000) + " seconds<br />Total of "+renderer.numDraws+" draws performed",4000);



                            }

                        });

                    });

                    $('base').attr('href',urlParts.protocol+"//"+urlParts.hostname+"/");
                    html = html.replace("<head>","<head><base href='"+urlParts.protocol+"//"+urlParts.hostname+"/' />");
                    if ($("#disablejs").prop('checked')){
                        html = html.replace(/\<script/gi,"<!--<script");
                        html = html.replace(/\<\/script\>/gi,"<\/script>-->");
                    }
                    // console.log(html);
                    d.write(html);
                    d.close();                         
                }                
            });                                    });                                                                            
    });        
</script>

提前致谢。

Answer 1

为此，您可以使用canvas2image。

我想你可以投入你准备好的功能：

ready: function(renderer) {
  ....
  Canvas2Image.saveAsPNG(renderer.canvas);

javascript'另存为'弹出窗口

1 个答案: