I'm trying to get the Base64 of items and images on an existing page using javascript

Question

Sorry, I thought you'd understand, because it's not possible to start a new thread for this Javascript. This new

is given

Wow, the last one I tried was

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);

This won't just return base 64 on the image from SQL, is this because it's on the Apache server?

ErrorPaused on exception: undefined or null

I have had issues trying to use the "Console" in the editor, maybe this has changed, please update your page and remove what doesn't work, this is so frustrating

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;
         });
}

mistake:

ReferenceError: blob is not defined. And pause on exception. so why Does it mean that blob cannot be formed?

I'm also trying the following, I think using onload will replace it The content of the image is base64, but it doesn't do that and I don't know why. I Also note that this should be the image blob the debugger declared in The argument is 1, but it's not.

Before someone says this, this is of no help, gives the same error No answer This seems to be the norm: How to solve "uncaught reference error: blob is not defined"?

In this case, elm is evaluated as img#np_track_artwork {alt:'Playing Tracking artwork', src: 'http://blah.com/now-playing.png, srcset:' Dimensions: '', crossOrigin:null ...} looks like a blob to me? So I rewrote It looks good to me:

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);
}

I also tend to create a new blob in case of an array var file = new blob ,elm.toString(),{'image/gif'}); but this gives the same Result parameter 1 instead of blob in imgReader.readADatUrl(file);

I received this frustrating message

You cannot post new questions now Sorry, we no longer Accept questions from your account, as most of your questions require improvement or are beyond the scope of this website. View help Central Page Why is my question no longer accepted? account? to know more information.

Please do not create new accounts. Instead, work on improving your Edit existing questions to match the site's requirements Guidelines and address any feedback you receive. you can also Continue to contribute to the site in other ways, such as editing Other posts to improve them.

When I tried asking a different question unrelated to the one I had completed I was promised to investigate nothing happened, I guess what does it mean to be a male dominant, you don't want women here?

I'm using JavaScript to place a GIF on a background and although this creates the text below it doesn't update the page, I'm not sure why anyone can help?

The HTML part of the table is

In the debugger, if I enter a variable in the console, it returns the following in object_dj:

I've also tried using it which also returns this content as a background image: "";

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

I even tried using the correct url object_dj.style.backgroundImage = 'http://d.ezyro.com/images/bandicam-2023-03-31-14-59-01-846.gif';

object_dj.style.backgroundImage is still ""what's going on I can set it with a stylesheet

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

I have already done my best. pUrl gets the url but it never assigns it to object_dj.style.backgroundImage and assigns it to url() returns "" pUrl contains the url "http://d.ezyro.com/images/ezgif-2- f0284e7093b1 .gif" (not a real URL). url() doesn't seem to work, maybe because it's not https but http? ：

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

I tried again before being deleted

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

The div background in the debugger console still gives nothing and nothing changes on the screen

Console: object_dj.style.backgroundImage ''

The JavaScript I use is

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 Website d does not exist.

Now with this step working, there must be a repaint or something missing, maybe you can guide me to make this work by updating the page.

I've tried changing the data with some garbage:

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

Also tried and verified image:

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

mistake

VM313:1 Uncaught reference error: imageURL is not defined in evaluation(evaluation in (music_now_playing.php:1:1),:1:1) At: 1:1

I tried adding variables It decided not to give an error.

This is from the console, your example does not load the url on my site:

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

It seems that imageURL is causing the problem?

I also tried: stackflow.com/questions/8840580/force-dom-redraw-refresh-on-mac but none of the answers worked. Is there any new way to do this?

object_dj.scrollBy(0,0); also does not form it and it is not recognized in JQuery.fn.redraw() JQuery

Answer 1

Assuming the server served you the image, maybe it's cached somewhere? Redrawing or otherwise forcing a rerender may work. Try this:

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);