如何在新选项卡中打开新创建的图像？

Posted 2023-02-22

【中文标题】如何在新选项卡中打开新创建的图像？

【英文标题】：How to open the newly created image in a new tab?

【发布时间】：2015-03-04 02:07:30

【问题描述】：

以下代码在同一页面的底部创建图像。 如何将该图像显示到新选项卡/窗口中，而不是显示在同一页面中？

success: function (data) 
            var image = new Image();
            image.src = "data:image/jpg;base64," + data.d;
            document.body.appendChild(image);
        

【问题讨论】：

使用window.open并写入此窗口。

【参考方案1】：

类似：

success: function (data) 
        var image = new Image();
        image.src = "data:image/jpg;base64," + data.d;

        var w = window.open("");
        w.document.write(image.outerhtml);
    

【讨论】：

我们可以为不止一张图片执行此操作吗？

可能很明显.. 但是在 Chrome 中使用上面时。我得到“流行音乐被阻止......”因此Cannot read property 'document' of null：/

请注意：用户无法从这个新窗口选项卡保存图像

别忘了加上：w.document.close();最后，否则页面将继续加载。 （在 Chrome 中测试）

实际上，在 w.document.write 中，我包含了一个完整的 img 标记，但它确实有效！谢谢！

【参考方案2】：

当前的建议不适用于 chrome，我总是得到一个白页，现在我正在使用

const base64ImageData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
const contentType = 'image/png';

const byteCharacters = atob(base64ImageData.substr(`data:$contentType;base64,`.length));
const byteArrays = [];

for (let offset = 0; offset < byteCharacters.length; offset += 1024) 
    const slice = byteCharacters.slice(offset, offset + 1024);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) 
        byteNumbers[i] = slice.charCodeAt(i);
    

    const byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);

const blob = new Blob(byteArrays, type: contentType);
const blobUrl = URL.createObjectURL(blob);

window.open(blobUrl, '_blank');

感谢杰里米！https://***.com/a/16245768/8270748

【参考方案3】：

最新解决方案 - 2019-10 工作。

在新标签页中打开图片。

let data = 'data:image/png;base64,iVBORw0KGgoAAAANS';
let w = window.open('about:blank');
let image = new Image();
image.src = data;
setTimeout(function()
  w.document.write(image.outerHTML);
, 0);

https://***.com/a/58615423/2450431 https://***.com/a/46510790/2450431 https://***.com/a/27798235/2450431

【参考方案4】：

demo

更新了 DEMO（在 Chrome 中工作，即使弹出窗口被阻止） - 2021 年 3 月 3 日

对window.open 的调用可以绕过下面详述的问题。

document.getElementById('my_button').addEventListener('click', (evt) => 
  window.open("https://via.placeholder.com/150", '_blank')
);

上次在 64 位 Windows 10 上的 Chrome 88 中测试。

【讨论】：

在演示中，可能值得在点击事件上触发新窗口，这样它就不会被大多数浏览器阻止为弹出窗口（我以为演示被破坏了一分钟在我注意到有一个被阻止的弹出窗口之前）

我得到这个：“不允许将顶部框架导航到数据 URL”

这曾经可以工作，但 chrome 现在被阻止 不允许将顶部框架导航到数据 URL：

这在 Chrome 88 64 位、Windows 10 中仍然适用于我...但是，您必须允许弹出窗口（在搜索栏中）。正如@DBS 建议的那样，即使弹出窗口被阻止，也可以在 chrome 88 中作为事件处理程序运行......检查更新的演示。

如果 占位符 是实际的数据 URL，则将不起作用。 See Data_URIs.