Base64 编码图片作为链接的处理方法 - WebCat - 常规

<!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</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>浏览器会将以Base64编码的图片视为普通的下载链接，这是浏览器的默认行为，无法直接更改。如果不希望将其视为下载链接，可以考虑使用其他方式来展示图片，例如使用img标签直接显示图片而不是作为下载链接。