Javascript help

[Ashawn]

This is more of a request (not Xenforo related) than a question. If you do not mind, can you write a code that will allow me to replace any image url with a new image url?

For example: If i wanted to preview the change of a logo without logging into the admin cp, all i would have to do is copy and paste the image url of the logo into the line and then copy/paste the image url of the new logo into the next line.

can you organize it like so:

Original_Character_Face_Image_Url
Original_Skill_One_Image_Url

 

[Arty]

Step 1: find image element

var img = document.querySelector('.p-header-logo img');

Step 2: replace its url:

img.setAttribute('src', 'https://link-to-new-image.png');

You can preview changes by writing that in browser console or you can simply inspect image element and replace source there.

 

[Ashawn]

Thanks, but apparently this doesnt work on the site i am trying to preview change on. In fact, it is a html5 game. According to another user, the images use for this html5 game are drawn onto a canvas.

This image url link is from the html5 game:

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

I want to replace it with this new image:

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

Image of the game

Spoiler

Spoiler: Code

<canvas id="mycanvas" width="770" height="560"></canvas>

<script>
// This originally sets the canvas up with image.jpg
  var canvas = $("#e")[0]; // only get first one
  var context = canvas.getContext("2d");
  var img = new Image();
  img.src = "https://i.imgur.com/UtLh0rG.jpg";
  img.onload = function() {
  context.drawImage(img, 0, 0);
  };
  </script>

<script>
   $('#a').click(function(){
   var canvas = $('#e')[0];
   canvas.width = canvas.width;//blanks the canvas
   var c = canvas.getContext("2d");
    var img = new Image();
    img.src = 'https://i.imgur.com/o829MR9.jpg';
   img.onload = function(){
    c.drawImage(img, 0, 0);
   }
   return false;
  });
      </script>