Как сохранить картинку на пк используя кнопку JS?

Question

[Aison]

Пишу расширение для браузера так, как устал тыкать мышкой. Хочу, чтобы при нажатии кнопки сохранаялась картинка как, если бы я нажал "ПКМ" > "Сохранить как".

Как можно реализовать? Проблема в том, что мне нужно сохранить оригинальное имя файла. Если я сохраняю при помощи контексного меню браузера, то всё норм, но если при помощи атрибута download (html5) то имя картинки берётся из url со всеми кракозябрами. В общем, нужно имитировать "ПКМ" > "Сохранить как".

Получается изначально мне нужно нажать на ссылку, где в href указан полный путь изображения, но url и название сохраняемого файла разные.

Набросал код.
Открываю ссылку при помощи простого условия, но нужно помимо этого сохранить картинку. Сама картинка хранится в img src. Есть идеи или браузер не позволит?

document.body.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 48) {
        document.getElementById("eID").click();
		//console.log('Save original .JPG image');
    }
});

Comments

[Александр]

В download можете написать имя сохраняемого файла.

[Aison]

Александр,

[GrayHorse]

Спарси правильно имя из ссылки сам, decodeURIComponent в помощь, либо бери его из "Content-Disposition" заголовка (при использовании fetch + downloadBlob из моего ответа), если он есть.

[Александр]

Aison, а в чем проблема узнать имя файла, которое установлено в тэге или установить своё? img.src.match(/\/([^/]*)$/).at(1)

Answer 1

[GrayHorse]

Например:

const url = "https://i.imgur.com/sduLRvf.jpeg";
const resp = await fetch(url);
const blob = await resp.blob();
const name = url.split("/").pop().replace("jpeg", "jpg");

downloadBlob(blob, name, url);

function downloadBlob(blob, name, url) {
    const anchor = document.createElement("a");
    anchor.setAttribute("download", name || "");
    const blobUrl = URL.createObjectURL(blob);
    anchor.href = blobUrl + (url ? ("#" + url) : "");
    anchor.click();
    setTimeout(() => URL.revokeObjectURL(blobUrl), 3000);
}

Можешь даже в консоли на этом сайте запустить — скачается.

url параметр опциональный, чисто чтобы сохранить возможность посмотреть оригинальный URL в менеджере загрузок.

Comments

[Aison]

хах, ну да... Access to fetch at 'https://imgbb.su/images/2023/04/18/photo_2023-04-1...' from origin 'imgbb.su' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

гадство. и как мне процесс хоть немного облегчить, устал вручную много картинок сохранять

[GrayHorse]

Используй юзерскрипт менеджер violentmonkey/tampermonkey c GM.xmlHttpRequest/GM_xmlHttpRequest.
Вот тебе простой враппер для него а-ля fetch:

// ==UserScript==
// ...
// @grant       GM.xmlHttpRequest
// ==/UserScript==

async function fetch(url, init = {}) {
    const defaultInit = {method: "get"};
    const {headers, method} = {...defaultInit, ...init};

    return new Promise((resolve, _reject) => {
        const blobPromise = new Promise((resolve, reject) => {
            GM.xmlHttpRequest({
                url,
                method,
                headers,
                responseType: "blob",
                onload: response => resolve(response.response),
                onerror: reject,
                onreadystatechange: onHeadersReceived
            });
        });
        blobPromise.catch(_reject);
        function onHeadersReceived(response) {
            const {
                readyState, responseHeaders, status, statusText
            } = response;
            if (readyState === 2) {
                const headers = parseHeaders(responseHeaders);
                resolve({
                    headers,
                    status,
                    statusText,
                    ok: status.toString().startsWith("2"),
                    arrayBuffer: () => blobPromise.then(blob => blob.arrayBuffer()),
                    blob: () => blobPromise,
                    json: () => blobPromise.then(blob => blob.text()).then(text => JSON.parse(text)),
                    text: () => blobPromise.then(blob => blob.text()),
                });
            }
        }
    });
}

function parseHeaders(headersString) {
    class Headers {
        get(key) {
            return this[key.toLowerCase()];
        }
    }
    const headers = new Headers();
    for (const line of headersString.trim().split("\n")) {
        const [key, ...valueParts] = line.split(":");
        headers[key.trim().toLowerCase()] = valueParts.join(":").trim();
    }
    return headers;
}

Либо скачивай из бекграунд скрипта, если это расширение.

[Aison]

GrayHorse, а они ж вроде манифест выпустили v3 и там уже он не работает.. или всё же норм...? вроде все блокировщики прекрасно работают. я попытался сделать копию браузера и повесил флаги

chrome.exe --user-data-dir="C://chrome-dev-disabled-security --disable-web-security --disable-site-isolation-tria

отключающие этот корс. не сработало

[Aison]

GrayHorse, сейчас код такой вот

(async function magicsas () {
	const url = document.getElementById('highres-show').getAttribute('href');
	const resp = await fetch(url);
	const blob = await resp.blob();
	const name = url.split("/").pop().replace("jpeg", "jpg");

	downloadBlob(blob, name, url);

	function downloadBlob(blob, name, url) {
		const anchor = document.createElement("a");
		anchor.setAttribute("download", name || "");
		const blobUrl = URL.createObjectURL(blob);
		anchor.href = blobUrl + (url ? ("#" + url) : "");
		anchor.click();
		setTimeout(() => URL.revokeObjectURL(blobUrl), 3000);
	}
})();


document.body.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 189) {
        //document.getElementById("highres").click();
		//console.log('Key -_ | Save original .JPG image');
		
		//var href = document.getElementById('highres-show').getAttribute('href');
		//console.log(href);
		
		magicsas();
    }
});

Answer 2

[Aison]

Понадобилось обойти также защиту браузера. CORS - обошёл при помощи этого асширения Всем спасибо!