html2canvas - screenshottedキャンバスは常に空/ブランクの

Question

私は私がスクリーンショットと保存したいのdiv、ここ

がある。これは、コードがある

function _download(uri, filename) 
 
{ 
 
    var el = $('.sf-download-button'); 
 
    if (el.length) 
 
    { 
 
     var link = document.createElement('a'); 
 
     if (typeof link.download === 'string') 
 
     { 
 
      link.href = uri; 
 
      link.download = filename; 
 
      document.body.appendChild(link); 
 

 
      //simulate click // this causes page to download an empty html file not sure why 
 
      link.click(); 
 

 
      //remove the link when done 
 
      document.body.removeChild(link); 
 
     } 
 
     else 
 
     { 
 
      window.open(uri); 
 
     } 
 
    } 
 
} 
 
function _save() 
 
{ 
 

 
    window.takeScreenShot = function() 
 
    { 
 
     var a =document.getElementById("my-div"); 
 
     html2canvas(document.getElementById("the-div-that-i-want-to-screenshot"), { 
 
      onrendered: function (canvas) 
 
      { 
 
       document.body.appendChild(canvas); 
 
       a.append(canvas); 
 

 
      }, 
 
      width: 220, 
 
      height: 310 
 
     }); 
 
    }; 
 

 

 
    $("#btnSave2").click(function() 
 
    { 
 
     html2canvas(document.getElementById("data"), { 
 
      onrendered: function (canvas) 
 
      { 
 
       _download_card(canvas.toDataURL(), 'save.png'); 
 
      } 
 
     }); 
 
    }); 
 
}

私のコードを持っています私はウェブからそれを得て、自分のものをいくつか追加しました。コードは私が信じていましたが、今、ボタンをクリックするとイメージが表示されます。イメージが表示されますが、それは空白です。

jsfiddleとすべての可能なコードの組み合わせを試しましたが、結果として何も違うものは得られませんでした。

ここで間違っていますか？

Answer 1

私はそれがChromeでの作業が、Mozillaの上で完璧に動作していなかった、単にブラウザを変更することにより、

を問題を解決しました。

はまた、私は、これだけにはMozillaに完璧な作品

$("#btnSave").click(function() { 
    html2canvas($("#card"), { 
     onrendered: function(canvas) { 
      theCanvas = canvas; 
      document.body.appendChild(canvas); 

      // Convert and download as image 
      $("#img-out").append(canvas); 
      // Clean up 
      //document.body.removeChild(canvas); 
     } 
    }); 
}); 

を、コードを変更しました。