API Docs for: 6.0.1
Show:

Image Class

Extends Base
Module: scrawlFrame

Image

Instantiation

  • scrawl.getImagesByClass()

Purpose

  • Wraps DOM <img> elements imported into the scrawl-canvas library
  • Used by Picture entitys and Pattern designs

Access

  • scrawl.image.IMAGENAME - for the Image object
  • scrawl.asset.IMAGENAME - for a link to the original <img> element

Constructor

Image

(
  • [items]
)

Parameters:

  • [items] Object optional

    Key:value Object argument for setting attributes

Methods

addImageByData

(
  • [items]
)
private

Creates a new <img> element from a canvas ImageData object - uses Image.addImageByUrl() to achieve this

Parameters:

  • [items] Object optional

    Key:value Object argument for setting attributes

Returns:

ImageDataUrl on success, false otherwise

addImageByElement

(
  • [items]
)
private

Adds a DOM <img> element to the library

  • items.element MUST be a reference to the element, and the element MUST be present in the DOM

Parameters:

  • [items] Object optional

    Key:value Object argument for setting attributes

Returns:

always true

addImageByUrl

(
  • [items]
)
private

Import an image using the supplied url string

Parameters:

  • [items] Object optional

    Key:value Object argument for setting attributes

Returns:

true; false on failure

checkNaturalDimensions

()

Check whether image's natural dimensions have changed and, if they have, update any relevant Picture entity copy data

... [BUG] trying to integrate this function - not working; issues with correct scoping between the fragment img asset and the image object - 'this' currently refers to image object, but when assigned to a load listener 'this' probably refers to the fragment img asset. Particularly unhelpful if fragment asset is a clone of the DOM asset (working assumption for scrawl tour is that responsive img needs to remain in DOM if it is going to pick up chrome browser resize reloads)

Current work-round (for scrawl tour page, which loads DOM img assets dynamically once canvas capability is confirmed) is to add a load event to each dynamically created img tag which, when triggered, invokes scrawl.getImageById(), which correctly updates everything to use the new img src file

Returns:

true if dimensions have changed; false otherwise

Example:

var imageData = [ {filename: 'seedhead', filesuffix: 'png', id: 'seedhead', panel: 0}, {filename: 'seedhead-partial', filesuffix: 'png', id: 'seedheadPartial', panel: 0}, {filename: 'whiteflower', filesuffix: 'png', id: 'whiteflower', panel: 1} ]; var iTemplate_src, iTemplate_srcset, iTemplate_sizes, iContainer; var lazyImageAssetLoad = function(){ var i, iz; iTemplate_src = 'assets/img/filename-1200.filesuffix'; iTemplate_srcset = 'assets/img/filename-400.filesuffix 400w, assets/img/filename-800.filesuffix 800w, assets/img/filename-1200.filesuffix 1200w, assets/img/filename-1600.filesuffix 1600w, assets/img/filename-2400.filesuffix 2400w, assets/img/filename-3600.filesuffix 3600w'; iTemplate_sizes='(min-width: 1024px) 800px, (min-width: 768px) 1200px, (min-width: 400px) 800px, (min-width: 320px) 400px, 100vw'; iContainer = document.createElement('div'); //set appropriate styles on iContainer to hide it; alternatively, add a css-defined classList String to it for(i = 0, iz = imageData.length; i < iz; i++){ iContainer.appendChild(buildImage(imageData[i])); } document.body.appendChild(iContainer); }; var buildImage = function(data){ var img = document.createElement('img'), file = /filename/g, suffix = /filesuffix/g, src = iTemplate_src.replace(file, data.filename), srcset = iTemplate_srcset.replace(file, data.filename); src = src.replace(suffix, data.filesuffix); srcset = srcset.replace(suffix, data.filesuffix); img.id = data.id; img.src = src; img.srcset = srcset; img.sizes = iTemplate_sizes; img.addEventListener('load', function(){ scrawl.getImageById(data.id, false); //not moving img out of DOM, instead cloning it into scrawl.work.imageFragment }, false); return img; }; lazyImageAssetLoad();

clone

(
  • [items]
)

Inherited from Base but overwritten in source\scrawlImageLoad.js:517

Clone an Image object

Parameters:

  • [items] Object optional

    Key:value Object argument for setting attributes

Returns:

new Image object on success; false otherwise

createImageFromCell

(
  • cell
  • [name]
)

Creates a new <img> element from an existing cell's current display - uses Image.addImageByUrl() to achieve this

Parameters:

  • cell String
    • name of Cell to use as the base for the new Image
  • [name] String optional
    • id attribute for the new Image

Returns:

ImageDataUrl on success, false otherwise

get

(
  • item
)

Retrieve an attribute value. If the attribute value has not been set, then the default value for that attribute will be returned.

Parameters:

  • item String

    Attribute key

Returns:

Attribute value

Example:

var box = scrawl.makeBlock({
    width: 50,
    });
box.get('width');               //returns 50
box.get('height');              //returns 0
box.get('favouriteAnimal');     //returns undefined

numberConvert

(
  • val
  • dim
)
private

Stamp helper function - convert string percentage values to numerical values

Parameters:

  • val String

    coordinate String

  • dim Number

    dimension value

Returns:

Number - value

parse

()

Turn the object into a JSON String

Returns:

object of object's currently set attributes

set

(
  • items
)
chainable

Set attribute values. Multiple attributes can be set in the one call by including the attribute key:value pair in the argument object.

An attribute value will only be set if the object already has a default value for that attribute. This restricts the ability of coders to add attributes to Scrawl objects.

Parameters:

  • items Object

    Object containing attribute key:value pairs

Returns:

This

Example:

var box = scrawl.makeBlock({
    width: 50,
    height: 50
    });
box.set({
    height: 100,
    favouriteAnimal: 'cat'
    });
box.get('width');               //returns 50
box.get('height');              //returns 100
box.get('favouriteAnimal');     //returns undefined

updateDependentEntitys

()

Update the copyData of entitys that use this image as their source

Returns:

Always true

Properties

callback

Function

Constructor/clone function - some functions can call the Image constructor with a callback function

This attribute is not retained by the object

Default: undefined - callback is always removed once run

comment

String

Comment, for accessibility

Default: ''

data

Object

Constructor argument attribute - a canvas imageData object

This attribute is not retained by the object

Default: undefined

element

Object

Constructor argument attribute - a DOM <img> element

This attribute is not retained by the object

Default: undefined

height

Number

DOM image actual height, in pixels

Default: 0

name

String

Unique identifier for each object; default: computer-generated String based on Object's type

removeImageFromDOM

Boolean

Constructor/clone flag - if set to true (default), will remove the <img> element from the web page DOM

This attribute is not retained by the object

Default: true

timestamp

String

Creation timestamp

Default: ''

title

String

Title, for accessibility

Default: ''

type

String final

Inherited from Base but overwritten in source\scrawlImageLoad.js:317

Default: 'Image'

url

Object

Constructor argument attribute - a String URL for dynamically loading an image

This attribute is not retained by the object

Default: undefined

width

Number

DOM image actual width, in pixels

Default: 0