我正在嘗試使用 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 的映像上傳回基數 64，這是因為它在 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;
         });
}

錯誤：

ReferenceError：blob 未定義。並在異常時暫停。所以為什麼 是說無法形成blob嗎？

我也在嘗試下面這個，我認為用 onload 會取代它 圖像的內容採用base64，但它不這麼做，我不知道為什麼。我 另請注意，這應該是調試器在其中聲明的圖像 blob 參數為 1，但它不是。

在有人說這件事之前，這沒有任何幫助，給了同樣的錯誤沒有答案 這似乎是常態： 如何解決“未捕獲的引用錯誤：blob 未定義”？

在這種情況下，elm 被評估為 img#np_track_artwork {alt:'Playing 追蹤藝術品'，src：'http://blah.com/now-playing.png，srcset：''尺寸： '', 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 而非imgReader.readADatUrl(file);

中的斑點

我收到這封令人沮喪的訊息

您現在無法發布新問題抱歉，我們不再 接受來自您帳戶的問題，因為您的大部分問題 需要改進或超出了本網站的範圍。查看協助 中心頁面 為什麼我的問題不再被接受 帳戶？了解更多。

請不要建立新帳戶。相反，努力提高你的 透過編輯現有問題以符合網站的要求 指南並處理您收到的任何回饋。你也可以 繼續以其他方式為網站做出貢獻，例如編輯 其他帖子來改進它們。

當我嘗試提出與我已完成的問題無關的不同問題時，我被承諾調查什麼也沒有發生，我想這是一個男性主導的含義是什麼，你不希望女性在這裡？

我正在使用 JavaScript 將 GIF 放置在背景上，儘管這會創建下面的文本，但不會更新頁面，我不確定為什麼沒有人可以提供幫助？

表格中 HTML 部分為

#在偵錯器中，如果我在控制台中輸入變量，它將在 object_dj 中傳回以下內容：

#

我也嘗試過使用它也返回此內容作為背景圖像：“”；

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() 似乎不起作用，也許是因為它不是 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)');

P.S 網站 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 未捕獲的參考錯誤：imageURL 未定義 在評估（評估在（music_now_playing.php：1：1），：1：1） 於：1:1

我嘗試加入變數 它決定不給出錯誤。

這是來自控制台，您的範例不會在我的網站上載入網址：

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

似乎是 imageURL 導致了問題？

我也嘗試過： 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);