实现保存图片功能获取图片名称功能

原创于 2025-04-10 13:28:01 发布 · 600 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

2.1 使用String.prototype.split()

2.2 使用String.prototype.substring()结合lastIndexOf()

2.3 使用正则表达式

2.4 使用URL对象（推荐现代浏览器）

一、保存图片

1.1 同源情况下

当图片地址为同源不跨域情况下可直接是a 标签 download 即可

<a href="图片地址" download="图片名称"></a>

1.2 跨域情况下

该方法同源、跨域均可

  /**
    * imageUrl: 要下载的图片地址
    * name: 下载后的图片名称
    */
function downloadImage(imageUrl, name) {
        const image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute('crossOrigin', 'anonymous');
        image.onload = function () {
            const canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            const context = canvas.getContext('2d');
            context.drawImage(image, 0, 0, image.width, image.height);
            // 得到图片的base64编码数据
            const url = canvas.toDataURL('image/png');

            // 生成一个a元素
            const a = document.createElement('a');
            // 创建一个单击事件
            const event = new MouseEvent('click');
            a.download = name;
            // 将生成的URL设置为a.href属性
            a.href = url;
            // 触发a的单击事件
            a.dispatchEvent(event);
        };
        image.src = imageUrl;
}

<span onclick='downloadImage("图片地址","图片名称")'>保存图标</span>

二、通过图片URL获取图片名称

2.1 使用`String.prototype.split()`

使用split()方法来分割字符串，然后取出最后一个部分作为文件名。

let imageUrl = "https://example.com/path/to/your/image.jpg";
let fileName = imageUrl.split('/').pop(); // 使用pop()获取数组最后一个元素
console.log(fileName); // 输出: image.jpg

2.2 使用`String.prototype.substring()`结合`lastIndexOf()`

如果你想要更精确地控制分割的位置（例如，去除查询字符串等），你可以使用lastIndexOf()来找到文件名开始的位置，然后使用substring()来获取这部分字符串。

let imageUrl = "https://example.com/path/to/your/image.jpg?query=123";
let lastSlashIndex = imageUrl.lastIndexOf('/');
let fileName = imageUrl.substring(lastSlashIndex + 1); // 获取最后一个'/'之后的所有字符
console.log(fileName); // 输出: image.jpg?query=123

2.3 使用正则表达式

对于更复杂的URL结构（例如包含查询参数或锚点），你可以使用正则表达式来提取文件名。

let imageUrl = "https://example.com/path/to/your/image.jpg?query=123#anchor";
let fileName = imageUrl.split('/').pop(); // 先获取最后一个部分
// 如果URL中包含查询参数或锚点，你可能想要去除它们
fileName = fileName.split('?')[0].split('#')[0]; // 去除查询参数和锚点
console.log(fileName); // 输出: image.jpg

2.4 使用URL对象（推荐现代浏览器）

对于现代浏览器，使用URL对象可以更方便、更安全地处理URL。

let imageUrl = "https://example.com/path/to/your/image.jpg";
let urlObj = new URL(imageUrl);
let fileName = urlObj.pathname.split('/').pop(); // 使用pathname获取路径部分，然后分割获取文件名
console.log(fileName); // 输出: image.jpg

注意：