<!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 front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Je pensais aussi à la toile au début, mais j'ai vu que la personne qui posait la question l'avait déjà essayée. Je n'ai encore pensé à rien d'autre.
Mais pour ce que vous avez dit à propos de "la taille du fichier est trop grande", si vous avez converti l'image en base64 à l'aide de Canvas, c'est peut-être parce que vous avez défini le format de l'image au format png, par exemple :
Si tel est le cas, vous pouvez alors convertir au format jpeg et contrôler la qualité de la conversion, afin qu'elle soit plus petite une fois enregistrée. Par exemple :
Je pense que si tel est le cas, il ne devrait y avoir aucun problème en termes de taille.
ps : J'ai utilisé l'attribut download de la balise a mentionné ci-dessus, mais cela peut être un peu problématique pour le sujet de la question.
1. Des demandes peuvent encore être nécessaires. Si l'attribut download peut lire les images du cache et les enregistrer, il n'est peut-être pas nécessaire de demander des images mises en cache (en fait, je ne sais pas s'il dispose d'un mécanisme pour lire les images mises en cache, peut-être pas du tout). Mais pour les images volumineuses, même si elles sont chargées dans la page Web, le téléchargement à l'aide de l'attribut download doit toujours être téléchargé depuis le serveur.
2. L'attribut de téléchargement dans Firefox nécessite que le fichier dans le href ait la même origine que le nom de domaine de la page Web actuelle, sinon il ne sera pas téléchargé. Cependant, à en juger par la situation du sujet, cela devrait provenir de la même source, donc ce problème n'existe pas.
3.
un attribut de téléchargement de balise peut être pris en charge, mais il existe des problèmes de compatibilité ; une meilleure prise en charge doit généralement être effectuée par le serveur.