gpt4 book ai didi

javascript - Chrome 开发工具运行缓慢,因为我使用的是数据 :image in background image

转载 作者:太空宇宙 更新时间:2023-11-04 03:15:36 25 4
gpt4 key购买 nike

我正在制作的 Chrome 扩展程序取代了新的标签页,它可以非常快速地从 localStorage 加载图像数据,但需要 2-3 分钟才能打开 Chrome Dev Tools 的“元素”选项卡。我认为这是因为我在 body 的背景样式中使用 data:image 像这样......

<body style="background-image: url(data:image/jpeg;base64, ...)">

...加载约 40,000 个字符需要很长时间。

是否有更好的方法在 localStorage 中设置图像数据或使用 javascript/jQuery 显示它的更好方法?

(我不能使用 URL,因为它使用 unsplash.it 加载随机图像)

最佳答案

根据 apsillers 的想法,我使用了 Blob将 base64 数据转换为更短的 URL 以用作背景图像。

这是我采取的步骤:

  1. > Used canvas to convert the image URL into image data
  2. 通过替换开头将 base64 保存在 localStorage 中

    var b64Data = imageData.replace(/^data:image\/jpeg;base64,/, '');
  3. Created a Blob from the base64 string and created ObjectURL

    var blob = b64toBlob(b64Data, 'image/jpeg');
    var blobUrl = URL.createObjectURL(blob);
  4. 使用 jQuery 设置背景图片

    $('body').css('background-image', 'url(' + blobUrl + ')';

当我需要检索相同的图像时,我会采取相同的步骤,但会获取之前存储在 localStorage 中的 base64 数据并将其转换为对象 URL。

现在 Google Dev Tools 已恢复正常运行,缺少数千个字符的图像数据。

关于javascript - Chrome 开发工具运行缓慢,因为我使用的是数据 :image in background image,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28744562/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com