What is the best way to display a variable with a `new Image()` in an AngularJS ng-repeat loop?

Question

What is the best way to display a variable with a `new Image()` in an AngularJS ng-repeat loop?

I have an array filled with different Image objects:

var imageList = [ image1, image2, image3 ];

Each element in this array is a variable that holds new Image(). For instance: var image1 = new Image().

I use the .onload event to preload each image after setting its URL. Only once all images are loaded can other operations take place.

How can I display each element of the array in AngularJS and show the image?

<li ng-repeat="image in imageList">
   {{ image }}
   /* I want the output of the above line to appear like
      <img src="./img/xx.svg" /> */
</li>

I do not want to follow a method like the one below since each element in the array has already been created as a new Image():

<li ng-repeat="image in someImageList">
   <img ng-src="{{ image.url }}" />
</li>

If I try {{ image }}, the current output shows just {}. Using solely image results in a list containing "image" strings.

The rationale behind creating new image elements using JavaScript instead of <img/> tags is twofold: 1. The need for preloading images, and 2. The requirement to draw these images in <canvas>. Repeating the creation of <img/> for the same image sources would be redundant. Additionally, it would slow down the opening of a modal displaying a collection of these images. Therefore, by preloading the images beforehand, the modal potentially opens quicker.

javascript angularjs

Answer 1

Answer №1

To save the image, you must convert it to a data URI.

$scope.images = [];

loadImage('./img/xx.svg');

function loadImage(src) {
  var img = new Image();

  img.onload = function() {
    // Create a canvas
    var canvas = document.createElement('canvas');

    // Ensure the canvas matches the image size
    canvas.width = this.width;
    canvas.height = this.height;

    // Draw the image on the canvas
    canvas.getContext('2d').drawImage(this, 0, 0);

    // Add the data URI to your scope
    $scope.images.push(canvas.toDataURL('image/png'));

    // Update Angular about the change
    $scope.$apply();
  }

  img.src = src;
}

Then, you can display it as follows-

<li ng-repeat="image in images">
   <img ng-src="{{ image }}" />
</li>

The image will be in data URI format instead of a URL.

You have flexibility in implementing this using the canvas.

Answer 2

To save the image, you must convert it to a data URI.

$scope.images = [];

loadImage('./img/xx.svg');

function loadImage(src) {
  var img = new Image();

  img.onload = function() {
    // Create a canvas
    var canvas = document.createElement('canvas');

    // Ensure the canvas matches the image size
    canvas.width = this.width;
    canvas.height = this.height;

    // Draw the image on the canvas
    canvas.getContext('2d').drawImage(this, 0, 0);

    // Add the data URI to your scope
    $scope.images.push(canvas.toDataURL('image/png'));

    // Update Angular about the change
    $scope.$apply();
  }

  img.src = src;
}

Then, you can display it as follows-

<li ng-repeat="image in images">
   <img ng-src="{{ image }}" />
</li>

The image will be in data URI format instead of a URL.

You have flexibility in implementing this using the canvas.

What is the best way to display a variable with a `new Image()` in an AngularJS ng-repeat loop?

Answer №1

Similar questions

Missing HTTP request payload

Angular 4 Modals - Enhancing User Experience

How to set a default checked value in a custom DropDownList in AngularJS?

Transfer the address information to the billing address fields

Avian-themed masking feature for jCarousel

Embedding WebGL into XML files

Bootstrap 3 and Angular UI.Bootstrap Accordion working together

Attempting to use Vue.js for playing MP3 files

Having trouble getting Calendly Webhooks to function in a node.js environment with ngrok?

Setting up the Webpack configuration for a React application to incorporate source maps from external React packages that are listed as dependencies

Error encountered with jQuery XML: 'Access-Control-Allow-Origin' header is not present on the requested resource

Ways to transform date into a different structure using JavaScript

Utilizing Foundation JS for Responsive Design on Media Queries

What is the best way to choose all checkboxes identified by a two-dimensional array?

getting the angular service to function correctly

Using a Do/While loop in combination with the setTimeout function to create an infinite loop

The entry description function is not functioning properly when used with jGFeed

Leveraging Ajax, jQuery, and localStorage for seamless cross-browser

Retrieve the smallest value from an array of objects using BitGO

Obtain the data from the hyperlink destination