Как открыть изображение в новой вкладке?

Question

[Николай]

В БД сервера хранится изображение в формате Base64. Это изображение передается на фронт через api, как можно при нажатии на кнопку "Открыть" показать это изображение в новой вкладке?

Comments

[Александр]

Больше тэгов не влезло?

[Николай]

Александр, Оставил один

Answer 1

[lUser L]

htmlbook.ru/html/a/target
https://jsfiddle.net/m1dcjfpx/

Comments

[Николай]

В значение href нужно подставить url изображения, верно? А если есть только base64 этого изображения, а адреса нет?

[Вадим]

Николай, напрямую переходить на base64 нельзя. (Видимо, из соображений безопасности)
Но можно так

var cw = window.open();
cw.document.write('<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>')

[Вадим]

Николай, Либо на бэке поднимать эндпоинт, который будет по ссылке отдавать нормальную картинку

Answer 2

[Александр]

Не буду претендовать на лучшее решение, но как мне кажется, лучше сначала отрисовать изображение. Ну и конечно, вкладка откроется именно как файл.

const openInNewTab = (base64Image) => {
    const fixedBase64Image = base64Image.startsWith('data:image')
        ? base64Image
        : `data:image/png;base64,${base64Image}`;
    const image = new Image();

    image.addEventListener('load', () => {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        [canvas.width, canvas.height] = [image.width, image.height];
        context.drawImage(image, 0, 0);

        canvas.toBlob(blob => {
            const link = document.createElement('a');
            const url = URL.createObjectURL(blob);
            [link.href, link.target] = [url, '_blank'];

            link.addEventListener('click', () => {
                setTimeout(() => {
                    URL.revokeObjectURL(url);
                });
            });

            link.click();
        });
    });

    image.src = fixedBase64Image;
};

openInNewTab('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');