html2canvasで表示した画像をページ更新しても表示したままにしたい

html2canvasを使用して指定のIDの部分を画像として表示させています。
表示した画像をページを更新(F5等)しても消えることなく表示させたままにしたい(再度screenshotボタンを押せば画像が更新される)のですが、上手くいきません。
何か方法があればご助言いただけないでしょうか？
よろしくお願いします。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
</head>
<body>
<div>
  <input type="button" value="screenshot" onclick="screenshot('#abc')"> 
</div>

<div id="abc">
  <input type="text" value="abcde"> 
</div>

<hr />
<div>
  <img id="image">
</div>

<script>
	function screenshot(sel) {
    var element = $(sel)[0];
    html2canvas(element, { onrendered: function(canvas) {
        var imgData = canvas.toDataURL();
        $('#image')[0].src = imgData;
    }});
}
</script>
</body>
</html>