- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
<!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>
我想大声告诉你2017-05-19 10:43:13
我一开始想的也是canvas，不过看到题主已经试过了。其他的我还没想到什么办法。
但针对你说的“文件体积过大”，如果你是将图片用canvas转换成了base64的话，那么可能是因为你把图片格式设置成了png格式，比如：
canvas.toDataURL('image/png')如果是这样的话，那么你可以转换成jpeg格式，并且可以控制转换质量，这样保存下来就小了。比如：
canvas.toDataURL('image/jpeg',0.5);我感觉这样的话，在体积上应该不存在问题了。
ps：楼上所说a标签的download属性，我用过，但对题主的情况来说可能有点问题。
1.可能仍旧需要请求。如果download属性能从缓存中读取图片来保存，那么对于有缓存的图片可能不需要请求（其实我尚不清楚其是否有读取缓存图片的机制，也许根本没有）。但对于大图片，即使在网页里加载完了，用download属性下载还需要从服务器下载。
<a href="https://files.yande.re/image/eb619bf8aff0bd440ec724211fce245c/yande.re%20389825%20dress%20elf%20erect_nipples%20makita_yoshiharu%20no_bra%20nopan%20open_shirt%20pointy_ears%20see_through%20skirt_lift.jpg" download="a.jpg">xxxxx</a>
<br>
<img src="https://files.yande.re/image/eb619bf8aff0bd440ec724211fce245c/yande.re%20389825%20dress%20elf%20erect_nipples%20makita_yoshiharu%20no_bra%20nopan%20open_shirt%20pointy_ears%20see_through%20skirt_lift.jpg">2.download属性在firefox里，需要href里的文件和当前网页的域名同源，否则不会下载。不过从题主的情况来看，应该是同源的，不存在这问题。
3.