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:

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:

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

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:

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