如何用绝对链接将画布图片转换为PNG图片

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中通过画布创建一张图片。

请看一下我的代码，我已经详细说明了所有内容和注释。

我想有一个链接到这张照片，它可以复制，每天照片上的日期必须是真实的。

所以，我想要什么。当按下鼠标右键时，我希望生成的图片具有"复制图像地址"选项，如下所示：我希望它是的方式

如您所见，我当前的结果图片如下：因为我现在有

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>

此外，如果还有任何其他情况，那么把你的代码放在中进行进一步审查