文章/答案/技术大牛

发布

社区首页 >问答首页 >调整和保存html2canvas生成的图像

问调整和保存html2canvas生成的图像
EN

Stack Overflow用户

提问于 2012-07-20 10:56:13

回答 1查看 14.6K关注 0票数 1

这是我正在使用的脚本

<script src="http://code.jquery.com/jquery.min.js"></script> 
<script>window.jQuery||document.write('<script src="js/jquery-1.7.1.min.js"><\/script>');</script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/js/html2canvas.js?rev032"></script> 
<script type="text/javascript">
    var date=new Date();
    var message,timeoutTimer,timer;
    var proxyUrl="http://html2canvas.appspot.com";

    function addRow(a,c,d){var b=$("<tr />").appendTo($(a));b.append($("<td />").css("font-weight","bold").text(c)).append($("<td />").text(d))}

    function throwMessage(b,a){
        window.clearTimeout(timeoutTimer);
        timeoutTimer=window.setTimeout(function(){
            message.fadeOut(function(){message.remove()})
        },
        a||2000);

        $(message).remove();
        message=$("<div />").html(b).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(){$("#recommended a").click(function(c){
            c.preventDefault();
            $("#url").val(this.href);
            $("button").click()
        });

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

        $("#getscreenshot").click(function(d){
            d.preventDefault();
            $(this).prop("disabled",true);
            var c=$("#url").val();
            $("#content").append($("<img />").attr("src","http://html2canvas.hertzen.com/loading.gif").css("margin-top",40));
            var f=document.createElement("a");
            f.href=c;
            $.ajax({
                data:{xhr2:false,url:f.href},url:proxyUrl,dataType:"jsonp",success:function(e){
                    a=document.createElement("iframe");
                    $(a).css({visibility:"hidden"}).width($(window).width()).height($(window).height());
                    $("#content").append(a);
                    b=a.contentWindow.document;
                    b.open();$(a.contentWindow).load(function(){
                        var g=$(a).contents().find("body"),h={onrendered:function(j){
                            $("#content").empty().append(j);
                            $("#getscreenshot").prop("disabled",false);
                            $("base").attr("href","")
                        }, 
                        allowTaint:true,
                        taintTest:false,
                        flashcanvas:"src/flashcanvas.min.js"},
                        i=html2canvas(g,h)
                    });
                    $("base").attr("href",f.protocol+"//"+f.hostname+"/"+f.pathname);
                    e=e.replace("<head>","<head><base href='"+f.protocol+"//"+f.hostname+"/"+f.pathname+"'  />");

                    if($("#disablejs").prop("checked")){
                        e=e.replace(/\<script/gi,"<!--<script");
                        e=e.replace(/\<\/script\>/gi,"<\/script>-->")
                    }
                    b.write(e);b.close()
                }
            });
        })
    });
</script>

<h1>Html2Canvas javaScript screenshot creator</h1>
<form class="well form-search"> <label for=url>Website URL:</label> 
    <input type=url id=url value="http://www.google.co.in" class="input-medium search-query"/><button class=btn id=getscreenshot>Get screenshot!</button> 
</form> 
<label for="disablejs">Disable JavaScript (recommended, doesn't work well with the proxy)</label>
<input id="disablejs" type="checkbox" checked="">
<br>
<div id=content></div> <!-- Image will be displayed here-->

现在，它正在生成html正文内容的屏幕截图。

我需要调整图像的大小，并(存储在/上载到)本地服务器

php

javascript

jquery

image-resizing

html2canvas

回答 1

Stack Overflow用户

发布于 2012-07-20 11:37:12

您需要做的是通过使用ajax或提交表单将映像源发送到服务器。要获取源，请使用以下内容：

var src = $("#your-image").attr('src');
$.post(url, {'source':src}, function(data){});

在php中：

$img = $_POST['source'];
file_put_contents('image_file', base64_decode($img));

还没有测试代码，但应该会让你走上正确的轨道。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11577908

复制

相似问题

问调整和保存html2canvas生成的图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问调整和保存html2canvas生成的图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问调整和保存html2canvas生成的图像
EN