Question 43205 in Html Question posted in
Some basic documentation can be found here.

I am trying to get a base64 of an item and image on an existing page using javascript – Html

Sorry I thought you would catch on as could not start a new thread for this Javascript . gives this new

Wow last try 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 didnt return base 64 either only on the images from SQL is this because its on Apache server ?

Error Paused on Exception: undefined or null to

I the tried with which in my editor has trouble with ‘console’ perhaps that’s changed too sign please update your pages and delete non workable content its 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;
         });
}

Error:

ReferenceError: blob is not defined. And pauses on exception. so why
is it saying blob cannot be formed?

I am also trying this below which I thought with onload would replace
contents of the image with base64 however it dd not do this idk why. I
also note the this should be a image blob which the debugger states in
parameter’s 1 it is not .

before someone says it this was no help gave same error no answers
which seems the norm:
How can I solve "Uncaught ReferenceError: blob is not defined"?

In this case elm is evaluated as img#np_track_artwork {alt:’Playing
track artwork’,src:’http://blah.com/now-playing.png,srcset:” sizes:
”, crossOrigin:null …} which looks to me like a blob ? So i rewrote
it and it looked ok 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 trend creating a new blob incase in was an array var file = new blob ,elm.toString(),{'image/gif'}); but this gave same result parameter’s 1 not a blob in imgReader.readADatUrl(file);

I am getting this frustrating message

You can’t post new questions right now Sorry, we are no longer
accepting questions from your account because most of your questions
need improvement or are out of scope for this site. See the Help
Center page Why are questions no longer being accepted from my
account? to learn more.

Please do not create a new account. Instead, work on improving your
existing questions by editing them to comply with the site’s
guidelines and address any feedback you’ve received. You can also
continue to contribute to the site in other ways, such as editing
other posts to improve them.

When I try to ask different question unrelated to my finished questions I was promised investigation nothing occurred I am figuring this is a What is the meaning of male predominance and you dont want females here ?

I am using JavaScript to place a GIF on a background of a although this creates the text below it does not update the page I am unsure why not can anyone assist?

section in HTML in a table is <div id = 'DJ' class='DJvid' ></div>

In the debugger, if I type the variable into the console it returns the following in object_dj:
<div id="DJ" class="DJvid" style="background-image: url(http://d.ezyro.com/images/ezgif-2-f0284e7093b1.gif)"></div>

I have also tried with which also returns this content as 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 with the proper url
object_dj.style.backgroundImage = 'http://d.ezyro.com/images/bandicam-2023-03-31-14-59-01-846.gif';

object_dj.style.backgroundImage was still "" what is going on I can set this with a style sheet

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

I have tried just about everything I can. pUrl gets the url but it never assigns it to object_dj.style.backgroundImage with this assigned to the url() returning "" the pUrl has url in it "http://d.ezyro.com/images/ezgif-2-f0284e7093b1.gif" (not the real url). The url() doesn’t seem to work maybe because its 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 additionally before it was deleted

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

this in debugger console still gave nothing in the div background and no change on screen

Console:
object_dj.style.backgroundImage
”

The JavaScript I was using 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 the website d does not exist.

Now as this step works there must be a missing redraw or something that perhaps you could guide me to to get this working by updating the page.

I tried which just changes the data with some rubbish:

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

Also tried and verified images:

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

Error

VM313:1 Uncaught ReferenceError: imageURL is not defined
at eval (eval at (music_now_playing.php:1:1), :1:1)
at :1:1

I tried adding vars
It decided not to give error.

This is from the console your example does not load 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 to be imageURL which 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 a new way of doing this ?

Neither did object_dj.scrollBy(0,0); form it and it did not recoginse JQuery in JQuery.fn.redraw()

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    The answer was for Apache Servers non Windows servers

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

    This now functions. It somehow doesn't want the full url and is better as above to allow it to work.

    Thank you for all your suggestions which allowed me to work through this its much appreciated and lots of love!


  2. 0

    Provided that the server gives you the image ok… it might be getting cached somewhere? Redrawing or otherwise forcing a rerender might work. Try smth like 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);
    Login or Signup to reply.
  3. 0

    Here’s what I’d do:

    First, it’s likely some sort of issue with the URL not being found. So make sure the image you’re trying to serve actually exists. If the image really does exist, it could also be that your base URL and path aren’t being correctly concatenated, creating a URL that doesn’t exist. To make sure it’s being concatenated correctly, don’t interpolate the strings yourself. Instead, it is best practice to let the URL API do that for you.

    Also, rather than using .setAttribute(), I found it easier just to set .style.backgroundImage to the appropriate value, however, it’s essentially the same process.

    Here’s an example of some code that I code working. Note: I changed the example URL because the one in your question does not exist:

    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>
    Login or Signup to reply.
  4. 0

    Ok the answer was that it should be

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

    This worked flawlessly

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search