html2canvasイメージをデスクトップにダウンロード

Question

私はこれを見つけましたhttps://jsfiddle.net/8ypxW/3/と私はデスクトップに画像をダウンロードする方法を知りたいと思います。私はpngを保存するだけですが、ダウンロードできない場合はスクリプトを教えてください。

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

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

Answer 1

問題は、あなたのフィドルにcanvas2image.jsスクリプトの間違ったURLです。私はあなたが見ているために適切なものとバイブルを作成しました。下のコードでは、2つの "Save PNG"ボタンを見ることができます。 Canvas2Image.saveAsPNG関数を使用していますが、このメソッドの小さな問題は、保存されたイメージの名前を指定できないことです。 2番目のボタンはHTML download attributeを使用していますが、一部のブラウザではサポートされていません。

$(function() { 
    $("#btnSave").click(function() { 
    html2canvas($("#widget"), { 
     onrendered: function(canvas) { 
     Canvas2Image.saveAsPNG(canvas); 
     } 
    }); 
    }); 

    $("#btnSave2").click(function() { 
    html2canvas($("#widget"), { 
     onrendered: function(canvas) { 
     saveAs(canvas.toDataURL(), 'canvas.png'); 
     } 
    }); 
    }); 

    function saveAs(uri, filename) { 
    var link = document.createElement('a'); 
    if (typeof link.download === 'string') { 
     link.href = uri; 
     link.download = filename; 

     //Firefox requires the link to be in the body 
     document.body.appendChild(link); 

     //simulate click 
     link.click(); 

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

fiddle

敬具
クシシュトフ