点击下载图片失败?可能是跨域问题!
<!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 著作权归作者所有。请勿转载和采集!