javascript - Ist es möglich, das <img>-Element mit js zu speichern, ohne eine Download-Anfrage zu senden?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<img
src='https://sfault-avatar.b0.upaiyun.com/498/442/498442326-5810374d88a21_big64'
id='img' >
<button onclick="download()">下载</button>
<script>
/**
* 是否存在某种途径，可以实现点击后，直接在浏览器端把图片保存到用户的电脑上？
* ps： 我用尝试了一种方法，把img转成canvas，然后使用FileSaver.js能做到，
* 但是，这个保存出来的图片，体积很大，存在性能问题。
* 所以，我在想，能否直接把<img>元素的图片直接保存到用户的电脑上？
* 一般的做法，都是点击按钮，发送一个请求到服务器下载到用户电脑上，
* 我知道我这想法有点另类，但希望能讨论一下
**/
function download(){
var img = document.getElementById('img');
//......
}
</script>
</body>
</html>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我一开始想的也是canvas，不过看到题主已经试过了。其他的我还没想到什么办法。
但针对你说的“文件体积过大”，如果你是将图片用canvas转换成了base64的话，那么可能是因为你把图片格式设置成了png格式，比如：
如果是这样的话，那么你可以转换成jpeg格式，并且可以控制转换质量，这样保存下来就小了。比如：
我感觉这样的话，在体积上应该不存在问题了。
ps：楼上所说a标签的download属性，我用过，但对题主的情况来说可能有点问题。
1.可能仍旧需要请求。如果download属性能从缓存中读取图片来保存，那么对于有缓存的图片可能不需要请求（其实我尚不清楚其是否有读取缓存图片的机制，也许根本没有）。但对于大图片，即使在网页里加载完了，用download属性下载还需要从服务器下载。
2.download属性在firefox里，需要href里的文件和当前网页的域名同源，否则不会下载。不过从题主的情况来看，应该是同源的，不存在这问题。
3.
a标签download属性可以支持，但是存在兼容性问题；更好的支持一般需要服务端完成。