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);
请注意,由于现代浏览器的安全限制,此代码可能需要在用户触发的事件中运行(例如点击按钮时),以避免权限错误。
发表评论