High Quality Image

Estimated reading time: 2 minutes

BRAVIA Professional Display provides a special way to render an image file in high-quality in an application. In this case, an image is rendered in a 4K YUV physical plane separated from the RGB plane.

  <object id="hq-img" type="application/x-4k-photo" width="1920" height="1080"/>

The advantages of this function are:

  • Much better quality compared with <img> tag
  • 4K resolution is supported
  • Preload and cache are supported

However, there are some restrictions:

  • Only one <object> can be opened at a time, and cannot be used with Media Elements (<audio> and <video>) and other <object> elements
  • HTTP cookies are not supported when acquiring the image data
  • Relative path is not supported

Methods

  • long open()

    open() prepares for image rendering and returns 0 on success.

  • void close()

    close() releases the resource for image rendering.

  • long show(DOMString url)

    show() starts loading and rendering the image specified by the parameter 'url'.

  • long getStatus()

    getStatus() gets the status of the object tag and returns non-zero value when the object tag is opened.

  • long preload(DOMString url)

    preload() preloads the image data specified by the parameter 'url' and stores it in the memory.

Events

  • onshow

    onshow is called when the image rendering is complete.

    • 0: success
    • non-zero: error
  • onpreload

    onpreload is called when preload is complete.

    • 0: success or already cached
    • -1: error

Attributes

  • DOMString zoomMode

    zoomMode decides zoom mode

    • values: 'NoExpand' or 'Smart'.
    • default: 'NoExpand'
  • boolean is4kPanel

    is4kPanel shows the panel information of the display.

    • true: if the panel is 4k
    • false: if the panel is not 4k
  • boolean is4kPlayback

    is4kPlayback shows the capability of the 4k photo playback mode.

    • true: if the 4k photo playback mode is enabled in the setting
    • false: if the 4k photo playback mode is not enabled in the setting

Example

Please download a sample application and it shows a special way to render an image file in high-quality in an application.

The snippet below shows how to preload image data.

var object = document.getElementById('hq-img');
object.open();
object.onpreload = function(url, result) {
  object.show(url);
};
object.preload('https://example.com/4k_image.jpg');
Last modified: 11 Sep 2019