0

I need to update the background image of a canvas based on what the user selects in a select dropdown. The url of the image can be found in the value attributes of the option tags. But what is the best way for this? I think the image would load on every change in the dropdown. Should I keep all images as img tags on the page first? Here is my current code: 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

$("#bg").on("change", function(){
  var curSrc = $(this).val();
  var image = new Image();
  image.src = curSrc;
  image.onload = function(){
    ctx.drawImage( image, 0, 0, 150, 150 );
  }//onload()
});//#bg change()
.as-console
{
  display: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="150" height="150"></canvas>
<select id="bg">
  <option value="http://placehold.it/300x300?text=image+1">Image 1</option>
  <option value="http://placehold.it/300x300?text=image+2">Image 2</option>
  <option value="http://placehold.it/300x300?text=image+3">Image 3</option>
<select>

Update

My problem is that I have a number of text fields also. And on updating any of those fields (on change) I redraw the canvas, which includes loading and drawing the image again. So, if there are 8 textfields, then even after selecting an image, it will reload at least 8 times while the user fills out the text fields. I wanted to know if this will cause a trip to server or the image will be loaded from cache in such cases.

What I wanted to know is:
1. Will loading same image like I have done multiple times, cause multiple trips to server?
2. Is there any better approach that minimises the number of such round trips to server for loading image?

Mohit Bhardwaj
  • 9,650
  • 3
  • 37
  • 64
  • 1
    Your code looks fine... – Rayon Jun 23 '17 at 15:33
  • 1
    Depending on how many images you will have your page will need a lot of time to load all images when you are putting all images in an img tag at the beginning. With your code it loads the image when needed, looks fine.. – Schlumpf Jun 23 '17 at 15:35
  • Thanks @Rayon but won't it load the image every time the user selects an image? If I have heavy/large images then it might create issue on my site. – Mohit Bhardwaj Jun 23 '17 at 15:35
  • 1
    IMO, If you have heavy images, and you are loading them all together, it will create poor UX for user. Loading them on demand appears better approach to me... If you have few limited number of images then you may go with former approach... – Rayon Jun 23 '17 at 15:37
  • @Rayon But my problem is that I have a number of text fields also. And on updating any of those fields (on `change`) I redraw the canvas, which includes loading and drawing the image again. So, if there are 8 textfields, then even after selecting an image, it will reload at least 8 times while the user fills out the text fields. I wanted to know if this will cause a trip to server or the image will be loaded from cache in such cases. – Mohit Bhardwaj Jun 23 '17 at 15:42
  • 1
    `what is the best way for this` Define `best`? If you are not looking for anything concrete to solve I would think any discussion on `best` is primarily opinion-based – Nope Jun 23 '17 at 15:44
  • @Fran `Best` here for me is minimum round trips to server for image load. – Mohit Bhardwaj Jun 23 '17 at 15:45
  • 1
    @MohitBhardwaj In that case I would look into caching (controlled by you) on first load and/or even pre-loading and caching while nothing else is happening on the front end. – Nope Jun 23 '17 at 15:46
  • @Fran you're right. Now I think perhaps I can save each loaded image in an `img` tag so that first time it loads from server on dropdown change. But if user selects it again, it's loaded from the `img` tag. – Mohit Bhardwaj Jun 23 '17 at 15:49
  • 1
    I don't know what is best for your exact scenario but I would google `image caching and preloading` for some interesting SO posts and other sites on that topic and see what works best for you. - This might be a good start? ► https://stackoverflow.com/questions/8497855/cache-background-image – Nope Jun 23 '17 at 15:57
  • Thanks @Fran that's helpful. – Mohit Bhardwaj Jun 23 '17 at 16:01

0 Answers0