Image

Davit Barbakadze edited this page Jul 7, 2015 · 31 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.

Table of Contents

Constructor

### [Image()](/moxiecode/moxie/blob/master/src/javascript/image/Image.js#L26 "Defined at: src/javascript/image/Image.js:26")

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

## Properties ### [uid](/moxiecode/moxie/blob/master/src/javascript/image/Image.js#L69 "Defined at: src/javascript/image/Image.js:69")

Unique id of the component

### [ruid](/moxiecode/moxie/blob/master/src/javascript/image/Image.js#L77 "Defined at: src/javascript/image/Image.js:77")

Unique id of the connected runtime, if any.

### [name](/moxiecode/moxie/blob/master/src/javascript/image/Image.js#L85 "Defined at: src/javascript/image/Image.js:85")

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

### [size](/moxiecode/moxie/blob/master/src/javascript/image/Image.js#L94 "Defined at: src/javascript/image/Image.js:94")

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

### [width](/moxiecode/moxie/blob/master/src/javascript/image/Image.js#L103 "Defined at: src/javascript/image/Image.js:103")

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

### [height](/moxiecode/moxie/blob/master/src/javascript/image/Image.js#L112 "Defined at: src/javascript/image/Image.js:112")

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

### [type](/moxiecode/moxie/blob/master/src/javascript/image/Image.js#L121 "Defined at: src/javascript/image/Image.js:121")

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

### [meta](/moxiecode/moxie/blob/master/src/javascript/image/Image.js#L130 "Defined at: src/javascript/image/Image.js:130")

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])](/moxiecode/moxie/blob/master/src/javascript/image/Image.js#L139 "Defined at: src/javascript/image/Image.js:139")

Alias for load method, that takes another mOxie.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])](/moxiecode/moxie/blob/master/src/javascript/image/Image.js#L150 "Defined at: src/javascript/image/Image.js:150")

Loads image from various sources. Currently the source for new image can be: mOxie.Image, mOxie.Blob/mOxie.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();
	img.onload = function() {
		var blob = img.getAsBlob();
		
		var formData = new mOxie.FormData();
		formData.append('file', blob);

		var xhr = new mOxie.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)
### [downsize(opts)](/moxiecode/moxie/blob/master/src/javascript/image/Image.js#L181 "Defined at: src/javascript/image/Image.js:181")

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

Arguments

  • opts Object

    • width Number
      Resulting width
    • [height=width] Number
      Resulting height (optional, if not supplied will default to width)
    • [crop=false] Boolean
      Whether to crop the image to exact dimensions
    • [preserveHeaders=true] Boolean
      Whether to preserve meta headers (on JPEGs after resize)
    • [resample=false] String
      Resampling algorithm to use for resizing
### [crop(width, [height=width], [preserveHeaders=true])](/moxiecode/moxie/blob/master/src/javascript/image/Image.js#L232 "Defined at: src/javascript/image/Image.js:232")

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])](/moxiecode/moxie/blob/master/src/javascript/image/Image.js#L253 "Defined at: src/javascript/image/Image.js:253")

Retrieves image in it's current state as mOxie.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])](/moxiecode/moxie/blob/master/src/javascript/image/Image.js#L269 "Defined at: src/javascript/image/Image.js:269")

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])](/moxiecode/moxie/blob/master/src/javascript/image/Image.js#L285 "Defined at: src/javascript/image/Image.js:285")

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, [opts], [type="image/jpeg"], [quality=90], [crop=false])](/moxiecode/moxie/blob/master/src/javascript/image/Image.js#L299 "Defined at: src/javascript/image/Image.js:299")

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

  • [opts] 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()](/moxiecode/moxie/blob/master/src/javascript/image/Image.js#L430 "Defined at: src/javascript/image/Image.js:430")

Properly destroys the image and frees resources in use. If any. Recommended way to dispose mOxie.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