js把img中的图片保存到本地

在JavaScript中,要将一个<img>标签中的图片保存到本地,可以使用以下步骤:

  1. 创建一个<a>标签,设置download属性为图片的名字。

  2. 创建一个Blob对象,使用图片的src属性。

  3. 将Blob对象设置为<a>标签的href属性。

  4. 触发点击事件,使得浏览器下载图片。

以下是实现这些步骤的示例代码:

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);

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

分类:开发日记 时间:2024年07月02日 浏览:349
发表评论