Skip to content

moxie.image.Image

Jump to bottom
Davit Barbakadze edited this page Aug 6, 2017 · 3 revisions

Important! This page is auto-generated from the comments in the source files. All changes will be overwritten! If you are looking to contribute, modify the comment in the corresponding source file instead.

Module: moxie.image.Image

Table of Contents

Constructor

Image()

Image preloading and manipulation utility. Additionally it provides access to image meta info (Exif, GPS) and raw binary data.

Properties

uid

Unique id of the component

ruid

Unique id of the connected runtime, if any.

name

Name of the file, that was used to create an image, if available. If not equals to empty string.

size

Size of the image in bytes. Actual value is set only after image is preloaded.

width

Width of the image. Actual value is set only after image is preloaded.

height

Height of the image. Actual value is set only after image is preloaded.

type

Mime type of the image. Currently only image/jpeg and image/png are supported. Actual value is set only after image is preloaded.

meta

Holds meta info (Exif, GPS). Is populated only for image/jpeg. Actual value is set only after image is preloaded.

Methods

clone(src, [exact=false])

Alias for load method, that takes another moxie.image.Image object as a source (see load).

Arguments

  • src Image
    Source for the image
  • [exact=false] Boolean
    Whether to activate in-depth clone mode

load(src, [mixed])

Loads image from various sources. Currently the source for new image can be: moxie.image.Image, moxie.file.Blob/moxie.file.File, native Blob/File, dataUrl or URL. Depending on the type of the source, arguments - differ. When source is URL, Image will be downloaded from remote destination and loaded in memory.

Arguments

  • src Image|Blob|File|String
    Source for the image
  • [mixed] Boolean|Object

Example

	var img = new moxie.image.Image();
	img.onload = function() {
		var blob = img.getAsBlob();

		var formData = new moxie.xhr.FormData();
		formData.append('file', blob);

		var xhr = new moxie.xhr.XMLHttpRequest();
		xhr.onload = function() {
			// upload complete
		};
		xhr.open('post', 'upload.php');
		xhr.send(formData);
	};
	img.load("http://www.moxiecode.com/images/mox-logo.jpg"); // notice file extension (.jpg)

resize(options)

Resizes the image to fit the specified width/height. If crop is specified, image will also be cropped to the exact dimensions.

Arguments

  • options Object

    • width Number
      Resulting width
    • [height=width] Number
      Resulting height (optional, if not supplied will default to width)
    • [type='image/jpeg'] String
      MIME type of the resulting image
    • [quality=90] Number
      In the case of JPEG, controls the quality of resulting image
    • [crop='cc'] Boolean
      If not falsy, image will be cropped, by default from center
    • [fit=true] Boolean
      In case of crop whether to upscale the image to fit the exact dimensions
    • [preserveHeaders=true] Boolean
      Whether to preserve meta headers (on JPEGs after resize)
    • [resample='default'] String
      Resampling algorithm to use during resize
    • [multipass=true] Boolean
      Whether to scale the image in steps (results in better quality)

downsize()

(deprecated: use resize())

Downsizes the image to fit the specified width/height. If crop is supplied, image will be cropped to exact dimensions.

crop(width, [height=width], [preserveHeaders=true])

Alias for downsize(width, height, true). (see downsize)

Arguments

  • width Number
    Resulting width
  • [height=width] Number
    Resulting height (optional, if not supplied will default to width)
  • [preserveHeaders=true] Boolean
    Whether to preserve meta headers (on JPEGs after resize)

getAsBlob([type="image/jpeg"], [quality=90])

Retrieves image in it's current state as moxie.file.Blob object. Cannot be run on empty or image in progress (throws DOMException.INVALID_STATE_ERR).

Arguments

  • [type="image/jpeg"] String
    Mime type of resulting blob. Can either be image/jpeg or image/png
  • [quality=90] Number
    Applicable only together with mime type image/jpeg

getAsDataURL([type="image/jpeg"], [quality=90])

Retrieves image in it's current state as dataURL string. Cannot be run on empty or image in progress (throws DOMException.INVALID_STATE_ERR).

Arguments

  • [type="image/jpeg"] String
    Mime type of resulting blob. Can either be image/jpeg or image/png
  • [quality=90] Number
    Applicable only together with mime type image/jpeg

getAsBinaryString([type="image/jpeg"], [quality=90])

Retrieves image in it's current state as binary string. Cannot be run on empty or image in progress (throws DOMException.INVALID_STATE_ERR).

Arguments

  • [type="image/jpeg"] String
    Mime type of resulting blob. Can either be image/jpeg or image/png
  • [quality=90] Number
    Applicable only together with mime type image/jpeg

embed(el, [options])

Embeds a visual representation of the image into the specified node. Depending on the runtime, it might be a canvas, an img node or a thrid party shim object (Flash or SilverLight - very rare, can be used in legacy browsers that do not have canvas or proper dataURI support).

Arguments

  • el DOMElement
    DOM element to insert the image object into

  • [options] Object

    • [width] Number
      The width of an embed (defaults to the image width)
    • [height] Number
      The height of an embed (defaults to the image height)
    • [type="image/jpeg"] String
      Mime type
    • [quality=90] Number
      Quality of an embed, if mime type is image/jpeg
    • [crop=false] Boolean
      Whether to crop an embed to the specified dimensions

destroy()

Properly destroys the image and frees resources in use. If any. Recommended way to dispose moxie.image.Image object.

Events

load

Dispatched when loading is complete.

Arguments

  • event Object

resize

Dispatched when resize operation is complete.

Arguments

  • event Object

embedded

Dispatched when visual representation of the image is successfully embedded into the corresponsing container.

Arguments

  • event Object
Clone this wiki locally