关于base64格式的图片，在浏览器使用新标签打开无显示内容

最新更新

以前的版本存在问题，当window.open打开窗口被浏览器拦截后，open方法会返回Null，从而导致无法打开base64窗口。因此对其进行优化，如下：

export function openBase64(base64) {
    if (!base64) {
        window.alert('没有base64数据');
        return;
    }
    const img = new window.Image();
    img.src = base64;

    const newWin = window.open('');
    // 如果浏览器拦截了窗口打开 那么window.open就会返回null
    if (!newWin) {
        window.alert('弹出窗口被浏览器拦截了，请查看地址栏右侧有无相关设置！结果已在控制台打印');
        console.log(base64);
    }
    newWin.document.body.style.background = '#000';
    newWin.document.body.style.textAlign = 'center';
    newWin.document.body.appendChild(img);
    newWin.document.title = '图片预览';
    newWin.document.close();
}

旧版

在开发一个简单的截图应用的时候，发现合成的base64图片，使用<a>标签和window.open直接打开新标签页，发现新标签页显示about:blank，是空页面。

经过一番查找，最后发现可以使用JS解决这个问题：

<div id="open">打开base64的图片</div>

open.addEventListener('click', () => {

    const img = new window.Image();
    img.src = 'base64...';

    const newWin = window.open('');
    newWin.document.body.style.background = '#000';
    newWin.document.body.style.textAlign = 'center';
    newWin.document.body.appendChild(img);
    newWin.document.title = '图片预览';
    newWin.document.close();

});

此时就可以将图片在新的标签页中打开了。