如何使用绝对链接在 PNG pic 中转换 Canvas pic？

Question

            <!-- Create a canvas to combine text and image -->
                    
            <canvas id="myCanvas" width="450" height="600">  
            </canvas>

            <!-- Script for displaying the current date in dd-mm-year format -->

            <script>
            var d = new Date();
            var month = new Array("01","02","03","04","05","06","07","08","09","10","11","12");
            var tt = d.getDate() + "." + month[d.getMonth()] + "." + d.getFullYear();
            </script>


            <script> 

            /* Transfer the value of the current date to the canvas, and transform it into a picture */

            var cx = document.getElementById("myCanvas").getContext("2d");
            cx.font = "15pt Arial";
            cx.fillText(tt, 62, 300);
                    

            /* In order for the date to be on top of the piece of paper, move the element to the foreground */

            cx.globalCompositeOperation = "destination-over";     


            /* Add a picture of our dude with a document to the canvas */

            var canvas = document.getElementById("myCanvas"), 
            context = canvas.getContext("2d");
                 
            var img = new Image();
            img.src = "https://i.imgur.com/TCDGYdh.png";


            /* Move the picture with the dude to the background */

            img.onload = function() {
                var pattern = context.createPattern(img, "no-repeat");
                context.fillStyle = pattern;
                context.fillRect(0, 0, 450, 600);
            };

            </script>

对不起，我只是在学习。 :)

我想根据实际日期制作一张每天都会更改日期的图片。我尝试使用 JS 在 HTML 中通过画布创建图片。

请看一下我的代码，我已经用 cmets 详细说明了那里的所有内容。

我想要这张图片的链接，可以复制，而且每天图片上的日期必须是真实的。

那么，我想要什么。我希望生成的图片在按下鼠标右键时具有“复制图像地址”选项，如下所示： How I want it to be

如您所见，我当前的结果图片如下所示： As I have now

Answer 1

有多种方法，一种是将图像放在标签内

<a href="#">
   <img border="0" src="some.jpg" width="100" height="100">
</a>

其他是将链接放置到图像的绝对位置。

<div class="position-relative">
    <img border="0" src="some.jpg" width="500px" height="500px">
    <a href="#" class="position-absolute"><span class="no-opacity no-visibility no-pointers"></span></a>
</div>

另外，如果有任何其他情况，请将您的代码放入进一步审查