Raffaello_Image

new Raffaello_Image(reference, { imageConfigs })

This is the class to create an image element that can be drawn on the canvas. It supports loading images from local paths, remote URLs, and base64 encoded strings. The class handles the loading process and provides properties to access the image's dimensions and status.

Usage

Within the global class

new class {
  constructor() {
      ...

      this.myImage  = new Raffaello_Image({ src: '/path/to/myImage.png'});
      this.webImage = new Raffaello_Image({ src: 'https://images.pexels.com/photos/326900/pexels-photo-326900.jpeg'});
      this.base64Image = new Raffaello_Image({ src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA' });

      ...
  }
  templateInstructions() {
      const thisTemplate = this;
      
      // LAYER X // DRAW IMAGE
      this.canvas.addLayer().draw(function() {
          // Simple draw
          this.drawImage(thisTemplate.myImage);

          // Draw with specific size
          this.drawImage(thisTemplate.webImage.img, 
              100, 100 // Position
              250, 250 // Size
          );
      });

  }
}

At the project root

// At the root
const myImageAtRoot  = new Raffaello_Image({ url: '/path/to/myImage.png'});

new class {
  constructor() { ... }
  templateInstructions() {
      const thisTemplate = this;
      
      // LAYER X // DRAW IMAGE
      this.canvas.addLayer().draw(function() {
          this.drawImage(myImageAtRoot.img);
      });
      
  }
}

Constructor Options

Name	Required	Type	Default	Description
src or url	✅	string	''	The source URL of the image to be displayed. Either a local path, a remote URL, or a base64 encoded string.

Initiated Properties

Property	Type	Description
this.width	number	The width of the image.
this.height	number	The height of the image.
this.img	HTMLImageElement	The DOM image element that will hold the final image.
this.isLoaded	boolean	A flag indicating whether the image has finished loading.
this.isSafeForExport	boolean	A flag indicating whether the image is safe for export.

---