<!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="" 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>点击下载怎么不能下载内容:在给定的代码中,使用了JavaScript实现在页面加载时将图片转换为DataURL,并将其显示在页面上。同时,将图片的原始URL赋给了id为'oo'的链接元素,以便进行下载。
<p>然而,由于安全性方面的限制,浏览器不允许通过JavaScript直接下载跨域的图片。这意味着,如果你的图片URL与页面的域名不同,那么点击该链接将无法下载图片。</p>
<p>解决这个问题的一种方法是将图片上传到与页面相同的域名下,或者使用服务器端代码来处理下载操作。</p>
点击下载图片失败?可能是跨域问题!

原文地址: https://www.cveoy.top/t/topic/qi8q 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录