Apply-Mobile-Version.md

How to apply the mobile version.

Image editor How to apply a mobile device

• Some settings are required to use Image Editor components on mobile devices.
• Please refer to the sample page first to check the UI configuration and operation.

Step 1. Include the dependency file on the page. (PC version same)

<script src="libs/code-snippet.min.js"></script>
<script src="libs/jquery.min.js"></script>
<script src="libs/fabric.min.js"></script>
<script src="js/image-editor.js"></script>

Step 2. body Add markup to the tag to create an image editor. (PC version same)

<div class="tui-image-editor">
  <canvas></canvas>
</div>

Step 3. head Add a meta tag for setting the viewport to the tag.

<meta name="viewport" content="width=device-width, user-scalable=no" />

Step 4. Create an image editor by setting option values for mobile device optimization.

// Create image editor
var imageEditor = new tui.component.ImageEditor('.tui-image-editor canvas', {
  cssMaxWidth: document.documentElement.clientWidth,
  cssMaxHeight: document.documentElement.clientHeight,
  selectionStyle: {
    cornerSize: 50,
    rotatingPointOffset: 100,
  },
});

• cssMaxWidth, cssMaxHeight :
  • Sets maximum width and height values in the canvas area.
  • Do not set it to a fixed value like the PC version because the value changes depending on the mobile device to be connected.
• selectionStyle :
  • Selection style setting options that are displayed when an object such as an icon, text, etc. is selected.
  • If the corner size is small, it is difficult to resize and rotate, so set the selection style.
  • The selection style options are the same as those provided by fabric.js and can be set with the following option values: (Reference)

var options = {
  //...
  selectionStyle: {
    borderColor: 'red', // Selection line color
    cornerColor: 'green', // Selection corner color
    cornerSize: 6, // Selection corner size
    rotatingPointOffset: 100, // Distance from selection area to rotation corner
    transparentCorners: false, // Selection corner Transparency
  },
};

Step 5. Add a CSS file and markup for UI configuration. (PC version same)

<link type="text/css" href="css/service-mobile.css" rel="stylesheet" />

The CSS file is used on the sample page and should only refer to the UI configuration, It is recommended to customize image, CSS, and markup files when applying the service.

Step 6. Apply the image editor API to the UI

• API : http://nhn.github.io/tui.image-editor/latest/
• Sample Page : http://nhn.github.io/tui.image-editor/latest/tutorial-example03-mobile.html