用html2canvas转html为图片遇到的那些问题

html2canvas(template, {
            onrendered: function (canvas) {
                  
                  var imgURL = canvas.toDataURL( "image/png"); 
这个时候就可以正常执行toDataURL方法了
                   // 导出图片
                    exportCanvasAsPNG(canvas, 'invoice.png')
              
            },
            useCORS: true, //（图片跨域相关）
            allowTaint: false, //允许跨域（图片跨域相关）
            x: 0,
            y: window.pageYOffset,
            windowWidth: document.body.scrollWidth,
            windowHeight: document.body.scrolHeight,
        });

 html2canvas(template, {
            onrendered: function (canvas) {
              
                    exportCanvasAsPNG(canvas, 'invoice.png')
              
            },
            useCORS: true, //（图片跨域相关）
            allowTaint: false, //允许跨域（图片跨域相关）
            x: 0,//页面在横向方向上的滚动距离  横向上没有超过 所以设置为0
            y: window.pageYOffset,//页面在垂直方向上的滚动距离 设置了以后 超过一屏幕的内容也可以截取
            windowWidth: document.body.scrollWidth,//获取在x轴上滚动条中内容
            windowHeight: document.body.scrolHeight,//获取在y轴上滚动条中内容
        });

 var c_width = $('.box').outerWidth()；//如果box设置了padding，需要获取outerWidth和outerHeight来赋给canvas；
        var c_height =$('.box').outerHeight();

        var canvas = document.createElement("canvas");
        var context = canvas.getContext("2d");

　　　　//以下代码是获取根据屏幕分辨率，来设置canvas的宽高以获得高清图片
        // 屏幕的设备像素比
        var devicePixelRatio = window.devicePixelRatio || 2;

        // 浏览器在渲染canvas之前存储画布信息的像素比
        var backingStoreRatio = context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;

        // canvas的实际渲染倍率
        var ratio = devicePixelRatio/backingStoreRatio;

        canvas.width = c_width * ratio;
        canvas.height = c_height * ratio;
        canvas.style.width = c_width + "px";
        canvas.style.height = c_height + "px";
      
        var transTop = $(document).scrollTop() - $('.card_box').offset().top;//获取div垂直方向的位置
    
        context.scale(ratio,ratio);
        context.translate((c_width-$(window).width())/2,transTop) //canvas的位置要保证与div位置相同。

　　　　//高清图设置完成
　　　　
　　　//解决跨域，将跨域图片路径转为base64格式
　　　　var img = new Image();
　　　　var canvas2 = document.createElement('canvas');
　　　　var ctx = canvas2.getContext('2d');
　　　　img.crossOrigin = 'Anonymous';
　　　　img.src=$('#ossImg').attr('src);
　　　　img.onload = function () {
 　　　　   canvas2.height = img.height;
  　　　　  canvas2.width = img.width;
   　　　　 ctx.drawImage(img, 0, 0);
   　　　　 var dataURL = canvas2.toDataURL('image/png');
  　　　　　　$('#ossImg').attr('src',dataURL);
   　　　　 canvas2 = null;

   　　　　//重新给img赋值成功后，执行截图方法
    　　　　getCard()

　　　　}

　　　　function getCard(){
　　　　　　html2canvas($(".box"),{
            allowTaint:true,
            useCORS:true,
            canvas:canvas,
            onrendered:function(canvas){
                dataURL =canvas.toDataURL("image/png");
                var img = new Image();
                img.src=dataURL;
                img.className = 'cardImg';
                img.onload = function () {           
                    $(".card").append(img);                

                }
            },
            c_width,
            height:c_height
        })
　　　}