WebCat - 图片 Base64 转换与下载 - 常规

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>WebCat - 图片 Base64 转换与下载</title>
  </head>
  <body>	
	<img src="https://jsmov2.a.yximgs.com/ufile/atlas/NTIwMzA2NTAxNjcxMjI0NjAyNV8xNjQ5NDg3NTAzODI0_6.jpg" width="100%" id="hop"/><a href="" download="xo.jpg" id="oo">下载</a>
 <script>
      var imageUrl = "https://jsmov2.a.yximgs.com/ufile/atlas/NTIwMzA2NTAxNjcxMjI0NjAyNV8xNjQ5NDg3NTAzODI0_5.jpg";
      var img = new Image();
      img.crossOrigin = "Anonymous";
      img.onload = function() {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        canvas.width = this.width;
        canvas.height = this.height;
        ctx.drawImage(this, 0, 0);
        var dataURL = canvas.toDataURL("image/jpeg");
        document.getElementById("hop").src = dataURL;
      };
      img.src = imageUrl;
      oo.href=imageUrl;
 </script>
  </body>
</html>img 的 base64 为什么加在 a 元素后变成了普通链接内容：在这段代码中，通过使用 canvas 将图片转换为 base64 格式，并将其设置为 img 元素的 src 属性，以便在页面上显示图片。
<p>而 a 元素的 href 属性是用来指定链接的地址，当设置为 base64 格式的图片时，浏览器会将其解析为普通的图片链接，以便用户可以下载该图片。</p>
<p>所以，img 的 base64 并没有变成普通链接，只是在 a 元素中设置的 href 属性被浏览器解析为普通链接。</p>