実装したいこと

【前回で解決済み】①そのページにアクセスする度に何枚かあるカード画像から、3枚ランダムにピックアップされる
【前回で解決済み】②そのカード画像には各々別htmlのリンクが貼られており、クリックするとモーダルウィンドウで表示される
【仮設置で解決済み】③html2canvasを利用して、占い結果を画像に変換
④それをTwitterでシェアするためのリンクにする。

解決したいこと

それをTwitterでシェアするためのリンクにする。

参考にしたサイト

▼ボタンクリック時にhtml2canvasで保存した画像をダウンロードさせる方法
https://hinanaoblog.xyz/?p=434

↑主にこちらを使用して、画像DLまでを仮設置できてます。

▼html2canvasの使い方メモ（canvasで出力、画像としてダウンロード）
http://test.st40.xyz/one-run/article/312/

↑こちらも参考になりそうなのですが、
完全には理解してません。

▼画像生成してOGPに設定する
https://qiita.com/you8/items/bc5cbe887101863b242b
↑OGPの画像を変えるという発想の方が有効なのかもしれません。

書き出された画像のURLをTwitterのリンクに書きだすことができれば、可能だと思うのですが、
どのような書き方をしたら、実現が可能になるでしょうか？
以下書いたhtm＋javascriptです

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <title>占いコンテンツ</title>
5        <script>
6        window.addEventListener('DOMContentLoaded', function(e){
7          var arrImage = [
8            {src:"img/01.png",href:"1.html",alt:"no.1",sort:Math.random(),},
9            {src:"img/02.png",href:"2.html",alt:"no.2",sort:Math.random(),},
10            {src:"img/03.png",href:"3.html",alt:"no.3",sort:Math.random(),},
11            {src:"img/04.png",href:"4.html",alt:"no.4",sort:Math.random(),},
12            {src:"img/05.png",href:"5.html",alt:"no.5",sort:Math.random(),},
13            {src:"img/06.png",href:"6.html",alt:"no.6",sort:Math.random(),},
14            {src:"img/07.png",href:"7.html",alt:"no.7",sort:Math.random(),},
15            {src:"img/08.png",href:"8.html",alt:"no.8",sort:Math.random(),},
16            ];
17          arrImage.sort(function(x,y){
18            return x.sort-y.sort;
19          });
20          [].forEach.call(document.querySelectorAll('.link_list li'),function(x,y){
21            x.querySelector('a').setAttribute("href",arrImage[y].href);
22            x.querySelector('img').setAttribute("src",arrImage[y].src);
23            x.querySelector('img').setAttribute("alt",arrImage[y].alt);
24          });
25        });
26        </script>
27        <!--html2canvas-->
28          <script src="js/html2canvas.min.js"></script>
29          <script src="js/v2polyfill.min.js"></script>
30          <script type="text/javascript">
31             function getDisplayImage(){
32             //html2canvas実行
33             html2canvas(document.getElementById("target")).then(function(canvas) {
34             downloadImage(canvas.toDataURL());
35             });
36             }
37             
38             function downloadImage (data) {
39             var fname ="testimage.png";
40             var encdata= atob(data.replace(/^.*,/, ''));
41             var outdata = new Uint8Array(encdata.length);
42             for (var i = 0; i < encdata.length; i++) {
43             outdata[i] = encdata.charCodeAt(i);
44             }
45             var blob = new Blob([outdata], ["image/png"]);
46             
47             if (window.navigator.msSaveBlob) {
48             //IE用
49             window.navigator.msSaveOrOpenBlob(blob, fname);
50             } else {
51             //それ以外？
52             document.getElementById("getImage").href=data; //base64そのまま設定
53             document.getElementById("getImage").download=fname; //ダウンロードファイル名設定
54             document.getElementById("getImage").click(); //自動クリック
55             }
56             }
57         </script>
58   </head>
59    <body onLoad="Show()">
60        <div class="container">
61            <h1 class="oracle--ttl">占いコンテンツ</h1>
62            <div>
63                <input id="downloadImageButton" style="width:120px;" type="button" value="画像保存" onclick="getDisplayImage();" >
64                <a id="getImage" href=""  style="display:none;"  download="image.png">画像保存</a>
65            </div>
66            <hr>
67            <p class="oracle--result-ttl">3枚引き結果</p>
68            <div id="target">
69                <ul class="link_list oracle--result">
70                    <li>
71                    	<dl>
72                			<dt><a href="01.html" id="link1" class="gallery"><img name="imgNumber1" src="img/01.png" alt="01" width="160" height="255" border="0"></a></dt>
73                    		<dd></dd>
74                		</dl>
75                    </li>
76                     <li>
77                    	<dl>
78                			<dt><a href="02.html" id="link2" class="gallery"><img name="imgNumber2" src="img/02.png" alt="02" width="160" height="255" border="0"></a></dt>
79                    		<dd></dd>
80                		</dl>
81                    </li>
82                     <li>
83                    	<dl>
84                			<dt><a href="03.html" id="link3" class="gallery"><img name="imgNumber3" src="img/03.png" alt="03" width="160" height="255" border="0"></a></dt>
85                    		<dd></dd>
86                		</dl>
87                    </li>
88                </ul>
89            </div><!--/#target-->
90            <p class="oracle--result--note">※画像クリックでカードの詳細な説明がでます</p>
91～（以下略）～