npm package: @leditor/image-editor
Description: ImageEditor
Latest version: 1.0.3

# Image Editor

fork tui-image-editor

Optimize functionality
- resize
- error

## Features

### Image Load Error Handling

When an image fails to load (e.g., due to CORS restrictions or network issues), the editor will display a user-friendly error overlay with customizable messages.

#### Basic Usage

The error overlay automatically appears when image loading fails. You can customize the error messages and localize the UI text.

#### Configuration

##### 1. Customize Error Messages

You can customize the error messages by passing `errorMessages` in the `includeUI` configuration:

```javascript
var imageEditor = new tui.ImageEditor('#container', {
  includeUI: {
    loadImage: {
      path: 'img/sample.png',
      name: 'Sample'
    },
    errorMessages: {
      title: 'Image Cannot Be Accessed',
      description: 'This image cannot be downloaded, possibly due to cross-domain restrictions or network issues.',
      suggestion: 'Please try to download or edit this image in the popup interface.'
    }
  }
});
```

##### 2. Localize Error Messages

You can localize the "Suggestion" label and other error messages using the `locale` configuration:

```javascript
var imageEditor = new tui.ImageEditor('#container', {
  includeUI: {
    loadImage: {
      path: 'img/sample.png',
      name: 'Sample'
    },
    locale: {
      'Suggestion': '建议'  // Chinese localization
    },
    errorMessages: {
      title: '图片无法访问',
      description: '该图片无法下载,可能是由于跨域限制或网络问题。',
      suggestion: '请尝试在popup界面中下载或编辑此图片。'
    }
  }
});
```

##### 3. Complete Example

```javascript
var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
  includeUI: {
    loadImage: {
      path: 'img/sampleImage.png',
      name: 'SampleImage',
    },
    theme: blackTheme,
    initMenu: 'filter',
    menuBarPosition: 'bottom',
    locale: {
      'Suggestion': '建议',  // Localize the suggestion label
    },
    errorMessages: {
      title: '图片无法访问',
      description: '该图片无法下载,可能是由于跨域限制或网络问题。',
      suggestion: '请尝试在popup界面中下载或编辑此图片。'
    }
  },
  cssMaxWidth: 700,
  cssMaxHeight: 500,
  usageStatistics: false,
});
```

#### Alternative: Set Error Messages Programmatically

You can also set error messages programmatically using the `setImageLoadErrorMessages` method:

```javascript
imageEditor.setImageLoadErrorMessages({
  title: 'Custom Error Title',
  description: 'Custom error description',
  suggestion: 'Custom suggestion text'
});
```

**Note:** Using the `includeUI.errorMessages` configuration is recommended as it follows the same pattern as other configuration options like `locale`.

#### Error Overlay Features

- **Automatic Display**: The error overlay automatically appears when image loading fails
- **Customizable Messages**: All error messages can be customized
- **Localization Support**: The "Suggestion" label supports localization through the `locale` configuration
- **Smooth Animations**: Fade-in/fade-out animations for better user experience
- **Auto-Hide**: The overlay automatically hides when a valid image is successfully loaded

#### Examples

See the following example files for complete implementations:
- `examples/example01-includeUi.html` - Basic usage with custom error messages
- `examples/custom-error-messages.html` - Advanced usage with dynamic message updates