js把img中的图片保存到本地
在JavaScript中,要将一个<img>标签中的图片保存到本地,可以使用以下步骤:
创建一个<a>标签,设置download属性为图片的名字。
创建一个Blob对象,使用图片的src属性。
将Blob对象设置为<a>标签的href属性。
触发点击事件,使得浏览器下载图片。
以下是实现这些步骤的示例代码:
function saveImageToLocal(imgElement) {
// 创建一个a标签
const anchor = document.createElement('a');
// 设置下载的文件名
anchor.download = 'image-name.jpg';
// 创建一个Blob对象
const blob = fetch(imgElement.src)
.then(response => response.blob())
.then(blob => URL.createObjectURL(blob));
// 等待Blob对象创建完成后设置href
blob.then(url => {
anchor.href = url;
// 触发下载
anchor.click();
// 清理URL对象
URL.revokeObjectURL(url);
});
}
// 使用方法:假设你的<img>元素有一个id为"myImage"
const imgElement = document.getElementById('myImage');
saveImageToLocal(imgElement);请注意,由于现代浏览器的安全限制,此代码可能需要在用户触发的事件中运行(例如点击按钮时),以避免权限错误。
发表评论