使用html2canvas屏幕捕获 [英] screen capturing using html2canvas

问题描述

我打电话 screenView（）从另一个类。我可以调用它，但我没有收到 strDataURI 。我究竟做错了什么？

 函数screenView（）{
            VAR形象;

             VAR日期=新的日期（）;
             VAR消息，
             timeoutTimer，
             定时器;

             VAR proxyUrl =htt​​p://html2canvas.appspot.com;
             VAR的iframe，D;

             $（本）.prop（禁用，真正的）;
             VAR URL =htt​​p://www.facebook.com/google;

             VAR urlParts = document.createElement方法（'A'）;
             urlParts.href =网址;

             $阿贾克斯（{
                 数据： {
                     xhr2：假的，
                     网址：urlParts.href

                 }，
                 网址：proxyUrl，
                 数据类型：JSONP
                 成功：函数（HTML）{


                     IFRAME = document.createElement方法（IFRAME）;

                     $（IFRAME）的.css（{
                         可见性：隐藏
                     }）宽度（$（窗口）.WIDTH（））高度（$（窗口）.height（））。
                     $（'＃内容）追加（IFRAME）。

                    D = iframe.contentWindow.document;
                    警报（D -----+ D）;
                     d.open（）;

                        $（iframe.contentWindow）.unbind（'负荷'）;
                         警报（里＆GT;＆gt;中。+ $（IFRAME）.contents（）找到（'身体'））;
                     $（IFRAME）.contents（）。找到（身体）。html2canvas（{
                         canvasHeight：d.body.scrollHeight，
                         canvasWidth：d.body.scrollWidth，
                         记录：真

                     }）;
                     警报（前内加载视图）;
                     $（iframe.contentWindow）.load（函数（）{

                         警报（内观）;

                         $（IFRAME）.contents（）。找到（身体）。html2canvas（{
                             canvasHeight：30，
                             canvasWidth：10，
                             日志记录：真正的，
                             proxyUrl：proxyUrl，
                             记录：函数（MSG）{
                                 $（'＃记录器）。VAL（功能（E，I）{
                                     回到我+\ N+味精;
                                 }）;

                             }，
                             准备：函数（渲染）{
                                 警报（在一边准备渲染器）;
                                 $（'按钮'）丙（禁用，假）;
                                 $（＃内容），空（）。
                                 VAR finishTime =新的日期（）;
                                     VAR strDataURI = renderer.canvas.toDataURL（为image / jpeg）;
                                     图像= strDataURI

                                     警报（最后一个+ strDataURI）;
                                     d.close（）;
                             }

                         }）;

                     }）;



                 }


             }）;
             返回形象;

        }
 

解决方案

你为什么不试试这个： HTTP：// hertzen。 COM /实验/ jsfeedback /

这个例子很适合我。

I am calling screenView() from another class. I am able to call it but I am not getting strDataURI. What am I doing wrong?

       function screenView(){
            var image;

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

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

             $(this).prop('disabled',true);
             var url = "http://www.facebook.com/google";

             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; 
                    alert("d-----"+d);
                     d.open();

                        $(iframe.contentWindow).unbind('load');
                         alert("inside>>"+ $(iframe).contents().find('body'));
                     $(iframe).contents().find('body').html2canvas({
                         canvasHeight: d.body.scrollHeight,
                         canvasWidth: d.body.scrollWidth,
                         logging:true

                     }); 
                     alert("inside before load view");
                     $(iframe.contentWindow).load(function(){

                         alert("inside view");

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

                             },
                             ready: function(renderer) {
                                 alert("in side ready renderer");
                                 $('button').prop('disabled',false);
                                 $("#content").empty();               
                                 var finishTime = new Date();
                                     var strDataURI = renderer.canvas.toDataURL("image/jpeg"); 
                                     image = strDataURI

                                     alert("last"+strDataURI);
                                     d.close();
                             }

                         });

                     });



                 }


             });
             return image;

        }

解决方案

Why don't you try this: http://hertzen.com/experiments/jsfeedback/

This example has worked for me

这篇关于使用html2canvas屏幕捕获的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！