PHP Classes

File: toastui/docs/Apply-Mobile-Version.md

Recommend this page to a friend!
  Classes of Mark de Leon  >  PHP Document Scanner using SANE or eSCL AirPrint  >  toastui/docs/Apply-Mobile-Version.md  >  Download  
File: toastui/docs/Apply-Mobile-Version.md
Role: Auxiliary data
Content type: text/markdown
Description: Auxiliary data
Class: PHP Document Scanner using SANE or eSCL AirPrint
Web interface to scan printed documents
Author: By
Last change:
Date: 1 year ago
Size: 3,374 bytes
 

Contents

Class file image Download

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
    }
};

2016-08-18 4 52 29

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

all_feature_small text_feature_small

For more information send a message to info at phpclasses dot org.