JS 图片复制到剪切板，轻松下载图片，告别繁琐操作！

使用JavaScript轻松下载网页图片

在网页开发过程中，经常需要下载图片。传统的方法是右键点击图片，选择“另存为”，这种方式繁琐且效率低下。本文将介绍两种使用JavaScript将图片复制到剪切板的方法，从而更便捷地下载图片。

方法一：使用getSelection + execCommand API

步骤1：获取图片元素

使用querySelector方法获取需要下载的图片元素。

const imageElement = document.querySelector('img');

步骤2：创建新的Image对象

创建一个新的Image对象，并设置其src属性为图片元素的src属性。

const newImage = new Image();
newImage.src = imageElement.src;

步骤3：将图片添加到剪切板

利用execCommand API将图片添加到剪切板。

document.execCommand('copy', false, newImage);

步骤4：下载图片

创建a元素，设置其href属性为图片的src属性，download属性为要下载的文件名，然后点击a元素下载图片。

const link = document.createElement('a');
link.href = newImage.src;
link.download = 'image.png';
link.click();

方法二：使用canvas元素

步骤1：创建Canvas元素

使用canvas元素创建画布。

<canvas id="canvas" width="500" height="500"></canvas>

步骤2：将图片绘制到Canvas元素

利用drawImage方法将图片绘制到canvas元素上。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(imageElement, 0, 0);

步骤3：将Canvas元素的内容复制到剪切板

利用execCommand API将canvas元素的内容复制到剪切板。

document.execCommand('copy', false, canvas.toDataURL());

步骤4：下载图片

创建a元素，设置其href属性为canvas元素的toDataURL()方法的返回值，download属性为要下载的文件名，然后点击a元素下载图片。

const link = document.createElement('a');
link.href = canvas.toDataURL();
link.download = 'image.png';
link.click();

常见问题解答

1. 为什么图片下载失败？

• 确保图片的src属性有效。
• 检查浏览器是否支持execCommand API。
• 确保用户允许浏览器访问剪切板。

2. 如何调整下载图片的质量？

• 对于canvas元素的方法，可以在toDataURL()方法中设置image/jpeg或image/png格式，并指定质量参数（0-1）。
• 对于getSelection + execCommand API，无法调整下载图片的质量。

3. 如何同时下载多张图片？

• 使用循环或数组遍历多张图片，逐一应用上述方法进行下载。
• 使用并行下载库（如axios）同时下载多张图片。

4. 是否可以下载受版权保护的图片？

• 下载受版权保护的图片可能违反版权法。
• 在下载图片之前，请确保拥有必要的许可或授权。

5. 如何将下载的图片保存到特定文件夹？

• 对于canvas元素的方法，使用FileSaver.js库可以将下载的图片保存到指定文件夹。
• 对于getSelection + execCommand API，无法将下载的图片保存到特定文件夹。