Images not writing with my routines

Hosting Support
1

Username (e.g. epiz_XXX) or Website URL

epiz_33087480
(please specify the website or account you are asking about)

Error Message

No message the image just doesnt update
(please share the FULL error message you see)

Other Information

I am trying to update it as follows but for some reason this is failing in add_trak.php

code snipit

$artwork = isset($_REQUEST['artwork']) && ($_REQUEST['artwork'] !== '') ? $_REQUEST['artwork'] : false;
if ($artwork !== false) {
    $artwork = base64_decode($artwork);
    $r = fopen('images/nowplaying_artwork_2.png', 'wb');
    if ($r !== false) {
        fwrite($r, $artwork);
        fclose($r);
    } else {
        ReturnError(500, 'Failed to write artwork to a file');
    }
}

(other information and details relevant to your question)
Any ideas please as this is strange and I guess I am missing something

2

I have checked chmod and file is -rw-rw-rw so am not sure why its not writing image as it was before. Is my reference wrong do I need something like /htddocs/images/ nowplaying_artwork_2.png?

3

Could you please double check the file that’s actually being stored?

Our hosting sends quite aggressive caching headers by default, so it’s possible that your image may have been updated in the background, but your browser just isn’t loading it.

If this is the case, you can bypass the cache by adding a query parameter to the URL (like nowplaying_artwork_2.png?version=latest), which bypasses the cache.

2 Likes
4

@anon14276620 what do you really want to achieve?
Do you want it to automatically change the “album cover” from the play list as soon as a new song/set starts playing?

I peeked a bit into your previous code



By the way, copy the generated code (view source) from your page and paste it on the validator.
You have over 500 errors

some are more important, for example:

currently all your URLs end with a quotation mark at the end (because you didn’t put a quotation mark at the beginning

Screenshot 2022-12-02 125855
Screenshot 2022-12-02 1258551301×380 40.6 KB

Screenshot 2022-12-02 123630
Screenshot 2022-12-02 1236301266×160 17.8 KB

PHP - you need to prepare this PHP code for the newer version that will come soon

Screenshot 2022-12-02 123546
Screenshot 2022-12-02 1235461511×207 29.9 KB

6 Likes
5

Note that there are some posts about this in the other topic, roughly from this post down:

2 Likes
6

Ok here goes Oxy . I hope this helps and than you for your help its much appreciated I will try my best:
1 ) page does not refresh with latest image in http://www.deniserose.epizy.com/images/nowplaying_artwork_2.png. I even deleted this image and refreshed page (see my posts for images the same error) was displayed nothing saying image not found. instead if you refresh this it appears with some major delay.

  1. the image write in file ‘add_track.php’ creates records and image . It does not seem to do this either properly as records are missing from SQL and file does not get changed all the time. I have placed a ftp upload from my end every time track changes of it so that other testing can take place… If I open refresh of http://www.deniserose.epizy.com/music_now_playing.php the icon does not change if I open the image http://www.deniserose.epizy.com/images/nowplaying_artwork_2.png if I refresh this it does show correct image again some strange delay.
  2. .My pages to refresh this http://www.deniserose.epizy.com/music_now_playing.php is in Javascript file ‘fetch_updater .js’ uses Ajax Timer an calls its page routinely to check image change but neither process in it seem to deliver base64from image on screen and in file which has worked without syntax error elsewhere. the chrome f12 debugger finds no errors when you run a trace and record network it shows fetchupdater.js firing and does not provide 64code in .base64file1 or base64file2
    code snipit from fetchupdater.js:
 const toDataURL = url => fetch(url)
  .then(response => response.blob())
  .then(blob => new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(blob)
  }))



     var image = document.createElement("img");
    image.src = 'http://www.deniserose.epizy.com/images/nowplaying_artwork_2.png';

    var base64file1;
   
    toDataURL("/images/nowplaying_artwork_2.png", function(data) {
        then(dataUrl => console.log('RESULT:', dataUrl));
        base64file1 = dataUrl;
        });
    
    //image.remove();
    
    var base64file2 = $("img#np_track_artwork").attr("src", "data:image/png;base64,"+data);

1564×732 101 KB

  1. my php all use things like strlen( and fwrite( from PHP which don’t seem to function either.
    https://i.gyazo.com/549031e220324ba71f6e165e6822afdd.png as you can see blank records are created and some records shown on the page do not remain in sql

I am aware not all files have been converted to use your different sql that you use .

On a note on the errors you recorded these seem to be all stylistic errors which do not affect function. Also please note i don’t have my last working code previous website wont provide it to me . So this is causing repeat debugging .

I had pondered if this indicated corruption on the site on the server ?

7

Would you be so kind to get open a command prompt if this server is running windows and run SFC / SCANNOW or on linux/unix use Fsck

8

Though it is running.
Escape cache read external img url by adding random url get modifier
… owplaying_artwork_2.png?s=0556332222333

use math random or generated string.

9

my urls are added with “<img id=#np_track_artwork src=/images/nowplaying_artwork_2.png?t=”+$time+" alt=‘Playing track artwork’ width=200 height=200>" but i tried
“<img id=#np_track_artwork src=/images/nowplaying_artwork_2.png?version=”+$time+" alt=‘Playing track artwork’ width=200 height=200>"

It was still no better . I asked for sfc as my fetch routine was working and was then today producing corrupted table . I had to go back to a copy here and start again hopeful it held

10

no. Copy my file for learn purpose.
Over here:

toDataURL('http://viena.lovestoblog.com/imgEdit/img/nowplaying_artwork_2.png')
  .then(dataUrl => {
    console.log('RESULT:', dataUrl)
    document.getElementById("export").value = dataUrl;
  })

change to

toDataURL('http://viena.lovestoblog.com/imgEdit/img/nowplaying_artwork_2.png?t=077.765')
  .then(dataUrl => {
    console.log('RESULT:', dataUrl)
    document.getElementById("export").value = dataUrl;
  })

Don’t ruin your original html tag. Its on script to change
On your hosting it gonna be

toDataURL('http://www.deniserose.epizy.com/images/nowplaying_artwork_2.png?t=078885')
  .then(dataUrl => {
    console.log('RESULT:', dataUrl)
    document.getElementById("export").value = dataUrl;
  })
11

Username (e.g. epiz_XXX) or Website URL

epiz_33087480
(please specify the website or account you are asking about)
http://www.deniserose.epizy.com/music_now_playing.php

Error Message

none
(please share the FULL error message you see)
Is it possible to store images as blob in sql record of approx. 200x200px

Other Information

I am just wondering
(other information and details relevant to your question)
Any suggestions please ?

12

Storing blob is a very poor practice. However what you do is, upload the image on the server and store its path in the database.
Like home/vol/assets/user/sc-12/koala.png.

2 Likes
13

Yes, for 200x200 px mediumblob type is enough.

14

I don’t really understand them in SQL I am hopeful for help in SQL they come up as [BLOB-1B] in PHPBrowser as empty if i have a field ImagBase64 defined as BLOB .Can I load this with base64 as in base64_decode($artwork2); or do I have to add it to a blob with url then upload that in sql or is there a better way of compacting it. I thought it could be resized in a image by creating new image resized I haven’t worked that out yet?
Here is what I have to convert it :

var image = document.createElement("img");
image.src = 'http://www.deniserose.epizy.com/images/nowplaying_artwork_2.png?tr=w-200,h-200'
$b64Data= base64_decode($artwork);
const byteCharacters = atob(b64Data);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], {type: contentType});

Is this the best way to do this ?

15

I think this would take forever to load a list of them but thanks

16

Dont have generated method use counter

My generated
var startDate = new Date(‘1/1/2019’); // this
var startMsec = startDate.getTime();// we get the time from the date in milliseconds
var toDate = new Date(); // the current date.
var ourTime = toDate.getTime();// we grap
var elapsed = (ourTime - startMsec) / 1000;

url=“xxxxx.jpg?t=”+elapsed;

17

The question is how do i get it back fast to base64 and image from sql?

18

Thank you Ewin but my fetch is not loading so it will not do this the base64 still is not coming back in my routine in js idk why

Hugs

19 
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=9" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
   	
   <script type="text/javascript" src="src/js/jquery-3.4.1.min.js"></script>
</head>
<body>
	<img id="img_artwork" width="220" height="277"
src="http://viena.lovestoblog.com/imgEdit/img/edwin.jpg" alt="Lesson">
	<script>
  
  function process() {
	alert("start");
    //var image = document.createElement("img");
    //image.src = 'http://viena.lovestoblog.com/imgEdit/img/nowplaying_artwork_2.png';
    //var base64file1;
    //image.remove();
   
   data=document.getElementById("export").value;
   alert(data);
    var base64file2 = data;
    $("#img_artwork").attr("src", base64file2);
    
    alert("ok");
}
</script>

<h1>HTML DOM Events</h1>
<h2>The onclick Event</h2>

<p>The onclick event triggers a function when an element is clicked on.</p>
<p>Click to trigger a function that will output "Hello World":</p>

<button onclick="myFunction()">Click me</button>
<button onclick="p1()">img Click me</button><br>

<button onclick="process()">Process</button>
<input onkeypress="process()" type="text" id="export" name="export">

<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

function p1() {
	alert("00");
  const toDataURL = url => fetch(url)
  .then(response => response.blob())
  .then(blob => new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(blob)
  }))
  alert("11");

toDataURL('http://viena.lovestoblog.com/imgEdit/img/nowplaying_artwork_2.png')
  .then(dataUrl => {
    console.log('RESULT:', dataUrl)
    document.getElementById("export").value = dataUrl;
  })
  
  alert("ok");
}

function px() {
	alert("00");
  const toDataURL = url => fetch(url)
  .then(response => response.blob())
  .then(blob => new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(blob)
  }))

  alert("ok");
}



</script>

</body>
</html>

It works. I need time to modify better. Ready to use to get base64.
http://viena.lovestoblog.com/imgEdit/r3.php

20

Didn’t work created empty field so why does this not work either as it looked ok ?

Hugs