我正在尝试使用 javascript 在现有页面上获取项目和图像的 base64

Question

对不起，我以为你会赶上，因为无法为这个 Javascript 启动一个新线程。 给这个新的

哇，我尝试的最后一次尝试是

var main_artwork = this.document.getElementById("np_track_artwork");
var title_album = this.document.getElementById("artwork_tit");
var base64art1 = title_album.src ; // Already base64
var base64art2 = getBase64StringFromDataURL(main_artwork.src);

这也没有仅在SQL中的图像上返回base64，这是因为它在Apache服务器上吗？

异常时暂停错误：未定义或 null 为

我尝试过在我的编辑器中遇到"控制台"问题，也许它也改变了标志，请更新您的页面并删除不可行的内容，这太令人沮丧了

function fetchbase64(transport2) {
const image = document.getElementByid(transport2);
fetch(image.src)
.then((res) => res.blob())
.then((blob) => {
const reader= new FileReader();
reader.onloadended = () => {
console.log(reader.result);
const base64 = getBase64StringFromDataURL(reader.result);
//console.log(base64);
};
reader.readAsDataUrl(Blob);
return base64;
});
}

错误：

引用错误：未定义 blob。并在异常时暂停。那么为什么 是说斑点不能形成吗？

我也在下面尝试这个，我认为加载会取代 带有 base64 的图像的内容，但它 dd 不这样做 idk 为什么。我 另请注意，这应该是调试器在其中声明的图像 blob 参数的 1 它不是 。

在有人说之前，这是没有帮助的，给出了同样的错误没有答案，这似乎是常态： 如何解决"未捕获的引用错误：未定义 blob"？

在这种情况下，elm 被评估为 img#np_track_artwork {alt：'Play Track Artwork'，src：'http：//blah.com/now-playing.png，srcset：'' size： ''， crossOrigin：null ...}在我看来，这就像一个斑点？所以我重写了 它对我来说看起来还行：

function encodeBase64(elm) {
var file = new blob([JSON.stringify(elm,null,elm.length)],{type:'image/gif'});
var imgReader = new FileReader();
imgReader.onloadend = function(){
console.log('Base64 Format', ImgReader.result);
}
imgReader.readAsDataURL(file);
var main = this.document.getElementById("np_track_artwork");
main.currentSrc =  "data:image/gif;base64,"+imgReader.readAsDataURL(file);
}
<img onchange="encodeBase64(this);" src="blahmasoganistic.png">

//** so i tried this which also failed to do much at all from some ones
//   site why does this stuff never work dont people believe in taking
//  it down.**
function encodeBase64(elm) {
var file = elm.files[0];
var imgReader = new FileReader();
imgReader.onloadend = function(){
console.log('Base64 Format', ImgReader.result);
}
imgReader.readAsDataURL(file);
var main = this.document.getElementById("np_track_artwork");
main.currentSrc =  "data:image/gif;base64,"+imgReader.readAsDataURL(file);
}

我还倾向于创建一个新的 blob，以防万一是一个数组var file = new blob ,elm.toString(),{'image/gif'});但这给出了相同的结果参数 1 而不是 blobimgReader.readADatUrl(file);

我收到这个令人沮丧的消息

您现在无法发布新问题 对不起，我们不再 接受来自您帐户的问题，因为您的大多数问题 需要改进或超出本网站的范围。查看帮助 中心页面 为什么不再接受我的问题 帐户？以了解更多信息。

请不要创建新帐户。相反，努力改善你的 现有问题通过编辑它们以符合网站的 准则并解决您收到的任何反馈。你也可以 继续以其他方式为网站做出贡献，例如编辑 其他帖子来改进它们。

当我尝试问与我完成的问题无关的其他问题时，我被承诺调查什么也没发生，我在想这是一个男性占主导地位的含义是什么，你不希望女性在这里？

我正在使用 JavaScript 将 GIF 放置在背景上，尽管这会创建下面的文本，但它不会更新页面，我不确定为什么没有人可以提供帮助？

表中 HTML 中的部分<div id = 'DJ' class='DJvid' ></div>

在调试器中，如果我在控制台中键入变量，它会object_dj返回以下内容：<div id="DJ" class="DJvid" style="background-image: url(http://d.ezyro.com/images/ezgif-2-f0284e7093b1.gif)"></div>

我也尝试过 这也将此内容作为背景图像返回：";

object_dj = document.getElementById("DJ");
object_dj.style.backgroundImage = url("images/bandicam-2023-03-31-14-59-01-846.gif");

我什至尝试使用正确的网址object_dj.style.backgroundImage = 'http://d.ezyro.com/images/bandicam-2023-03-31-14-59-01-846.gif';

object_dj.style.backgroundImage 仍然是"发生了什么，我可以用样式表设置它

.DJvid {  
background-image:url("images/background3.png");
height:250px;
background-repeat: no-repeat; 
background-size: 250px,350px;
background-position: bottom;
width:400px;


}

pUrl 获取 url 但从未将其分配给 object_dj.style.backgroundImage 并将其分配给返回 " 的 url() 返回 " pUrl 中有 url "http://d.ezyro.com/images/ezgif-2-f0284e7093b1.gif"(不是真正的 URL)。url() 似乎不起作用，也许是因为它不是 https 而是 http？:

pImageUrl = "images/bandicam-2023-03-31-14-59-01-846.gif";
pUrl =  baseURL + pImageUrl;
object_dj.style.backgroundImage = pUrl;

我在删除之前另外尝试了

$('DJ').css("backgroundImage","url(pUrl)");

这在调试器控制台中仍然在div 背景中没有任何内容，并且在屏幕上没有变化

安慰： object_dj.style.backgroundImage ''

我使用的 JavaScript 是

object_dj = document.getElementById("DJ");
baseURL = "http://d.ezyro.com/";
object_dj.setAttribute('style', 'background-image: url('+baseURL+'images/ezgif-2-f0284e7093b1.gif)');

附言网站 d 不存在。

现在，由于此步骤有效，因此必须缺少重绘或某些内容，也许您可以通过更新页面来指导我使其正常工作。

我试过只是用一些垃圾改变数据：

object_dj.style.opacity=0.99;
setTimeout(()=> {object_dj.style.opacity=''},0);

还尝试和验证的图像：

var imageUrl = "images/bandicam 2023-03-31 14-59-01-846.gif";
const pUrl = new URL(baseURL, imageUrl);
object_dj.style.backgroundImage = `url("${pUrl}")`;

错误

VM313：1 未捕获的引用错误：未定义图像 URL at eval (eval at (music_now_playing.php：1：1)， ：1：1) 在 ：1：1

我尝试添加变量 它决定不给错误。

这是从控制台您的示例不会在我的网站上加载 url：

bpm
<div class=​"hidden" id=​"#bpm">​196​</div>​
imageUrl
'images/bandicam 2023-03-31 14-59-01-846.gif'
object_dj.style.backgroundImage

pUrl
VM110:1 Uncaught ReferenceError: pUrl is not defined
at eval (eval at <anonymous> (music_now_playing.php:1:1), <anonymous>:1:1)
at <anonymous>:1:1
eval @ VM110:1
(anonymous) @ VM96:1
baseURL
'http://d.ezyro.com/'
imageURL
VM147:1 Uncaught ReferenceError: imageURL is not defined
at eval (eval at <anonymous> (music_now_playing.php:1:1), <anonymous>:1:1)
at <anonymous>:1:1

似乎是导致问题的图像网址？

我也试过： stackflow.com/questions/8840580/force-dom-redraw-refresh-on-mac 但答案都没有奏效.有没有新的方法可以做到这一点？

object_dj.scrollBy(0,0)也没有形成它，它也没有在JQuery.fn.redraw()中识别JQuery。

Answer 1

前提是服务器给你图像确定...它可能被缓存在某个地方？重绘或以其他方式强制重新渲染可能会起作用。尝试像这样：

object_dj = document.getElementById("DJ");
baseURL = "http://d.ezyro.com/";
imageUrl = baseURL + "images/ezgif-2-f0284e7093b1.gif";
object_dj.style.backgroundImage = "url(" + imageUrl + ")";
object_dj.parentNode.removeChild(object_dj);
object_dj.parentNode.appendChild(object_dj);

Answer 2

这是我要做的：

首先，可能是找不到 URL 的某种问题。因此，请确保您尝试投放的图片确实存在。如果图像确实存在，也可能是因为您的基本网址和路径未正确连接，从而创建了不存在的网址。为了确保它正确连接，请不要自己插值字符串。相反，最佳做法是让 URL API 为您执行此操作。

另外，与其使用.setAttribute()，我发现将.style.backgroundImage设置为适当的值更容易，但是，它本质上是相同的过程。

下面是我编写的一些代码的示例。注意：我更改了示例 URL，因为您问题中的 URL 不存在：

const base = 'https://www.cutecatgifs.com';
const path = 'wp-content/uploads/2013/06/Monday.gif';
const el = document.getElementById('content');
const url = new URL(path, base);
el.style.backgroundImage = `url("${url}")`;

#content {
color: red; /* just for visibility */
width: 300px;
height: 300px;
}

<div id="content">
Example content
</div>

Answer 3

好的，答案是它应该是

pImageUrl = "images/bandicam-2023-03-31-14-59-01-846.gif";
pUrl =  baseURL + pImageUrl;
object_dj.style.backgroundImage = "url(" + pImageUrl + ")";

这完美无缺

Answer 4

答案是针对非Windows服务器的Apache Servers。

pImageUrl = "images/bandicam-2023-03-31-14-59-01-846.gif";
pUrl =  baseURL + pImageUrl;
object_dj.style.backgroundImage = "url(" + pImageUrl + ")";

这现在起作用了。它不知何故不想要完整的 url，并且如上所述更好以允许它工作。

感谢您的所有建议，这些建议使我能够解决这个问题，非常感谢和充满爱！