### Advanced Pintura Editor with Dropzone Setup
Source: https://pqina.nl/pintura/docs/v8/installation/dropzone
This example demonstrates an advanced setup for Pintura Image Editor with Dropzone, allowing for a custom set of plugins, locales, and options. It uses the `openEditor` method and explicitly imports and configures various modules and plugins for a more optimized build. This approach is more verbose but offers greater control and smaller build targets.
```html
```
--------------------------------
### Install Pintura Private Package (Yarn)
Source: https://pqina.nl/pintura/docs/v8/package
After configuring .yarnrc.yml, this command installs the private, production version of the Pintura package using Yarn.
```bash
yarn add @pqina/pintura
```
--------------------------------
### Install Pintura Private Package (npm)
Source: https://pqina.nl/pintura/docs/v8/package
After configuring .npmrc, this command installs the private, production version of the Pintura package using npm.
```bash
npm install @pqina/pintura
```
--------------------------------
### Vanilla JavaScript Pintura Editor Setup
Source: https://pqina.nl/pintura/docs/v8/examples/resize-image
Provides an example of initializing the Pintura image editor using vanilla JavaScript. This code snippet demonstrates importing the editor, appending it to a DOM element, and configuring image processing parameters like upscale and fit.
```javascript
import { appendDefaultEditor } from './pintura.js';
const editor = appendDefaultEditor('#editor', {
src: 'image.jpeg',
// This will scale down the image to fit in a 256 × 256 square
imageWriter: {
targetSize: {
width: 256,
height: 256,
upscale: true,
fit: 'cover',
},
},
});
editor.on('process', (imageState) => {
document.querySelector('img').src = URL.createObjectURL(
imageState.dest
);
});
```
--------------------------------
### Prevent Test Version Installation (package.json)
Source: https://pqina.nl/pintura/docs/v8/package
This script in package.json's 'prebuild' ensures the production version of Pintura is installed by checking its origin. If the origin is incorrect, it throws an error, preventing the build.
```json
{
"scripts": {
"prebuild": "npx @pqina/package-has-origin @pqina/pintura npm.pqina.nl",
"build": "echo \"Running build\" && exit 1"
}
}
```
--------------------------------
### Default Pintura Editor with Dropzone Setup
Source: https://pqina.nl/pintura/docs/v8/installation/dropzone
This example shows the default implementation for setting up Pintura Image Editor with Dropzone. It uses the `openDefaultEditor` method to create an editor with all plugins loaded and default English locale settings. It requires Dropzone and Pintura scripts and styles.
```html
```
--------------------------------
### Pintura IIFE Build
Source: https://pqina.nl/pintura/docs/v8/package
Provides the Pintura IIFE (Immediately Invoked Function Expression) build, suitable for direct inclusion in HTML files via a script tag. This build is often used in simpler setups or when a module bundler is not in use.
```JavaScript
```
--------------------------------
### Install Pintura and Svelte Modules (NPM)
Source: https://pqina.nl/pintura/docs/v8/installation/svelte
Installs the necessary Pintura and Svelte Pintura modules from NPM. This is a common step for setting up the editor.
```bash
npm install --save @pqina/svelte-pintura @pqina/pintura
```
--------------------------------
### Load Pintura Video Editor Plugins and Styles
Source: https://pqina.nl/pintura/docs/v8/api/video-editor/installation
Demonstrates how to import and load the Trim plugin, its locale, and the necessary CSS for the Pintura Video Editor extension. It also shows how to open the editor with video-specific settings like trimming.
```javascript
import { setPlugins, openDefaultEditor } from '@pqina/pintura';
import '@pqina/pintura/pintura.css';
// Import trim plugin and locale
import { plugin_trim, plugin_trim_locale_en_gb } from '@pqina/pintura-video';
// Import Pintura video styles, these styles are needed to render the trim plugin
// Please note that how styles are imported differs per framework
import '@pqina/pintura-video/pinturavideo.css';
// Load the Trim plugin
setPlugins(plugin_trim);
openDefaultEditor({
src: './my-video.mp4',
// Example trim settings
imageTrim: [[0.5, 0.7]],
// Add the Trim plugin locale object
locale: {
...plugin_trim_locale_en_gb,
},
});
```
--------------------------------
### Customize Image Selection Guides with React
Source: https://pqina.nl/pintura/docs/v8/api/plugins/crop
This React example demonstrates using the cropWillRenderImageSelectionGuides callback within a PinturaEditor component. It mirrors the logic from the vanilla JavaScript example, adjusting guide appearance based on interaction.
```javascript
import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
const cropWillRenderImageSelectionGuides = (
interaction,
interactionFraction
) => {
const isRotating = interaction === 'rotate';
return {
rows: isRotating ? 5 : 3,
cols: isRotating ? 5 : 3,
opacity: interactionFraction * 0.25,
};
};
return (
);
}
export default App;
```
```css
.pintura-editor {
height: 600px;
}
```
--------------------------------
### Subscribing to Pintura Editor Events
Source: https://pqina.nl/pintura/docs/v8/installation/pintura-input
Demonstrates how to listen for Pintura editor events, such as 'pintura:process', using `addEventListener` on the `` element to react to image processing completion.
```javascript
const input = document.querySelector('pintura-input');
input.addEventListener('pintura:process', (e) => {
// The image was processed
});
```
--------------------------------
### jQuery Pintura Editor Initialization
Source: https://pqina.nl/pintura/docs/v8/examples/image-preview
Provides a jQuery example for initializing the Pintura editor. It includes setting up the editor with specific options and handling the 'pintura:process' event to display the processed image.
```html
```
--------------------------------
### Install Pintura Private Package (pnpm)
Source: https://pqina.nl/pintura/docs/v8/package
This command installs the private, production version of the Pintura package using pnpm, after configuring the .npmrc file.
```bash
pnpm add "@pqina/pintura"
```
--------------------------------
### Load Pintura Trim Plugin
Source: https://pqina.nl/pintura/docs/v8/api/video-editor/example
Demonstrates how to load the Trim plugin for the Pintura video editor. It involves importing necessary functions and locale data, setting the plugin, and opening the editor with video-specific options.
```javascript
import { setPlugins, openDefaultEditor } from '@pqina/pintura';
import '@pqina/pintura/pintura.css';
import { plugin_trim, plugin_trim_locale_en_gb } from '@pqina/pintura-video';
import '@pqina/pintura-video/pinturavideo.css';
setPlugins(plugin_trim);
openDefaultEditor({
src: './my-video.mp4',
imageTrim: [[0.5, 0.7]],
locale: {
...plugin_trim_locale_en_gb,
},
});
```
```css
@import '@pqina/pintura/pintura.css';
@import '@pqina/pintura-video/pinturavideo.css';
```
--------------------------------
### Install Pintura Public Package (npm)
Source: https://pqina.nl/pintura/docs/v8/package
This command installs the public test version of the Pintura package using npm. The test version includes a watermark.
```bash
npm install @pqina/pintura
```
--------------------------------
### Configure npm for Private Pintura Package
Source: https://pqina.nl/pintura/docs/v8/package
This configuration is added to the .npmrc file to authenticate with the private Pintura npm registry and install the production version.
```ini
@pqina:registry=https://npm.pqina.nl/
//npm.pqina.nl/:_authToken=${PQINA_NPM_TOKEN}
```
--------------------------------
### Basic Pintura Input Setup in HTML Form
Source: https://pqina.nl/pintura/docs/v8/installation/pintura-input
Demonstrates the fundamental setup of the `` element within an HTML form for image uploading. It includes the necessary CSS and JavaScript includes, form attributes for submission, and the custom element itself.
```html
```
--------------------------------
### Configure Yarn for Private Pintura Package
Source: https://pqina.nl/pintura/docs/v8/package
This configuration is added to the .yarnrc.yml file for Yarn 1.x to connect to the private Pintura npm registry and install the production version.
```yaml
npmScopes:
pqina:
npmRegistryServer: "https://npm.pqina.nl/"
npmAlwaysAuth: true
npmAuthToken: ${PQINA_NPM_TOKEN}
```
--------------------------------
### Basic Pintura Editor Setup (HTML)
Source: https://pqina.nl/pintura/docs/v8/api/markup-editor/shapes
Sets up the basic HTML structure for the Pintura editor, including linking the CSS and JavaScript files, and providing a container element for the editor. It also includes a script to initialize the editor.
```html
```
--------------------------------
### Angular Pintura Editor Setup
Source: https://pqina.nl/pintura/docs/v8/api/plugins/resize
Provides an example of integrating the Pintura image editor into an Angular application. It includes component setup, template usage, and module configuration for AngularPintura.
```typescript
import { Component } from '@angular/core';
import { getEditorDefaults } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
resizeHeightPresetOptions: any = [
[undefined, 'Auto'],
[200, 'Short'],
[400, 'Normal'],
[800, 'Tall'],
];
}
```
```html
```
```css
::ng-deep .pintura-editor {
height: 600px;
}
```
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AngularPinturaModule],
exports: [AppComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
--------------------------------
### Plain JavaScript Pintura Editor Setup
Source: https://pqina.nl/pintura/docs/v8/api/markup-editor/exports
Demonstrates the basic setup for Pintura editor using plain JavaScript, including loading necessary scripts and initializing the editor with a specified source image.
```html
```
--------------------------------
### Vue Pintura Editor Setup
Source: https://pqina.nl/pintura/docs/v8/api/markup-editor/properties
Demonstrates how to integrate the Pintura image editor into a Vue.js application. This example shows the component setup, data properties for editor defaults and toolbar, and styling.
```vue
```
--------------------------------
### Configuring Pintura Input with Utility Tools
Source: https://pqina.nl/pintura/docs/v8/installation/pintura-input
Illustrates how to configure the available image editing tools for the Pintura editor using a JSON-like string for the `utils` attribute on the `` element.
```html
```
--------------------------------
### Default Pintura Editor with Uppy Setup
Source: https://pqina.nl/pintura/docs/v8/installation/uppy
This example demonstrates the default implementation for setting up Pintura Image Editor with Uppy. It includes the necessary HTML structure for Uppy's dashboard and links to the required CSS and JavaScript files for both Uppy and Pintura. The JavaScript code initializes Uppy and configures it to use Pintura's `openDefaultEditor` for image editing.
```html
```
--------------------------------
### Customize Image Selection Guides with Svelte
Source: https://pqina.nl/pintura/docs/v8/api/plugins/crop
This Svelte example demonstrates the integration of Pintura's cropWillRenderImageSelectionGuides option. The callback function is defined and passed to the PinturaEditor component to customize guide rendering.
```javascript
```
--------------------------------
### Customize Image Selection Guides with Vue
Source: https://pqina.nl/pintura/docs/v8/api/plugins/crop
This Vue.js example shows how to implement the cropWillRenderImageSelectionGuides callback for the Pintura editor. The logic for adjusting guides based on interaction is encapsulated within the component's data.
```javascript
```
--------------------------------
### Integrate Pintura Editor in Angular (TypeScript)
Source: https://pqina.nl/pintura/docs/v8/api/image-editor/exports
Provides an example of integrating the Pintura Editor into an Angular application, including component setup and passing editor options.
```typescript
import { Component } from '@angular/core';
import { getEditorDefaults, createDefaultImageWriter } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults({
imageWriter: createDefaultImageWriter({
// Scale all input canvas data to fit a 4096 * 4096 rectangle
canvasMemoryLimit: 4096 * 4096,
// Fix image orientation
orientImage: true,
// Don't retain image EXIF data
copyImageHead: false,
// Convert all input images to jpegs
mimeType: 'image/jpeg',
// Reduce quality to 50%
quality: 0.5,
// Post images to API at './upload'
store: './upload',
// Limit size of output to this size
targetSize: {
width: 640,
height: 480,
fit: 'contain',
upscale: false,
},
// Show all output props
outputProps: [],
}),
});
}
```
--------------------------------
### Install Pintura and React Pintura with npm
Source: https://pqina.nl/pintura/docs/v8/installation/react
Installs the Pintura and react-pintura modules from NPM. This is the standard way to add the editor to your project.
```bash
npm install --save @pqina/react-pintura @pqina/pintura
```
--------------------------------
### Pintura TypeScript Declarations
Source: https://pqina.nl/pintura/docs/v8/package
Provides TypeScript declaration files for Pintura, enabling type checking and autocompletion for developers using TypeScript. This file should be referenced in your tsconfig.json.
```TypeScript
///
```
--------------------------------
### HTML: Basic Pintura Editor Setup
Source: https://pqina.nl/pintura/docs/v8/api/plugins/resize
A minimal HTML structure to set up the Pintura editor, including linking necessary CSS and JavaScript files and providing a container for the editor.
```html
```
--------------------------------
### Load Empty Canvas
Source: https://pqina.nl/pintura/docs/v8/examples
Initialize the editor with an empty canvas element as the source (`src`) to load a new blank image. This is useful for starting with a clean slate.
```javascript
src: document.createElement('canvas')
```
--------------------------------
### Initialize Pintura Image Editor with Plugins and Locale
Source: https://pqina.nl/pintura/docs/v8/faq/using-bare-factory
This code snippet demonstrates how to import necessary components from the Pintura library, register plugins, and initialize the image editor with custom configurations, including source image, readers, writers, orienters, shape preprocessors, and locale settings. It addresses common UI issues by ensuring all required dependencies and configurations are set.
```JavaScript
import {
// Image editor
appendEditor,
createDefaultImageReader,
createDefaultImageWriter,
createDefaultImageOrienter,
createDefaultShapePreprocessor,
// The plugins we want to use
plugin_crop,
plugin_filter,
plugin_finetune,
plugin_annotate,
plugin_decorate,
plugin_sticker,
plugin_frame,
plugin_redact,
plugin_resize,
// The method used to register the plugins
setPlugins,
// The core ui, markup editor, and plugin locale objects
locale_en_gb,
markup_editor_locale_en_gb,
plugin_crop_locale_en_gb,
plugin_filter_locale_en_gb,
plugin_finetune_locale_en_gb,
plugin_frame_locale_en_gb,
plugin_redact_locale_en_gb,
plugin_resize_locale_en_gb,
plugin_decorate_locale_en_gb,
plugin_annotate_locale_en_gb,
plugin_sticker_locale_en_gb,
// Import the default properties
markup_editor_defaults,
plugin_filter_defaults,
plugin_finetune_defaults,
plugin_frame_defaults,
} from './pintura/module/pintura.js';
// The plugins we want to load
setPlugins(
plugin_crop,
plugin_filter,
plugin_finetune,
plugin_annotate,
plugin_decorate,
plugin_sticker,
plugin_frame,
plugin_redact,
plugin_resize
);
appendEditor('.my-editor', {
// The source to load
src: 'image.jpeg',
// This reads the src, turns it into a file, and gets metadata info
imageReader: createDefaultImageReader(),
// This receives the file, metadata, and imageState and generates the output image
imageWriter: createDefaultImageWriter(),
// This is needed on older browsers to correctly orient JPEGs
imageOrienter: createDefaultImageOrienter(),
// This handles complex shapes like arrows and frames, it's also possible to add custom shape preprocessors
shapePreprocessor: createDefaultShapePreprocessor(),
// Let's have stickers stick to the image instead of being decorative shapes
stickerStickToImage: true,
// Set the Markup Editor defaults
...markup_editor_defaults,
// Set Finetune plugin defaults
...plugin_finetune_defaults,
// Set Filter plugin defaults
...plugin_filter_defaults,
// Set Frame plugin defaults
...plugin_frame_defaults,
// Set editor english locale
locale: {
...locale_en_gb,
...markup_editor_locale_en_gb,
...plugin_crop_locale_en_gb,
...plugin_filter_locale_en_gb,
...plugin_finetune_locale_en_gb,
...plugin_frame_locale_en_gb,
...plugin_redact_locale_en_gb,
...plugin_resize_locale_en_gb,
...plugin_decorate_locale_en_gb,
...plugin_annotate_locale_en_gb,
...plugin_sticker_locale_en_gb,
},
});
```
--------------------------------
### Setup Default Image Editor with FilePond
Source: https://pqina.nl/pintura/docs/v8/installation/filepond
This snippet shows how to set up a default image editor using Pintura and FilePond. It includes linking necessary CSS and JavaScript files for both libraries, registering FilePond plugins, and configuring the FilePond instance with image editor options.
```html
```
```javascript
// import Pintura Image Editor modules
import {
// Image editor
openEditor,
processImage,
createDefaultImageReader,
createDefaultImageWriter,
createDefaultImageOrienter,
// Only needed if loading legacy image editor data
legacyDataToImageState,
// Import the editor default configuration
getEditorDefaults,
} from './pintura/pintura.js';
FilePond.registerPlugin(
FilePondPluginFileValidateType,
FilePondPluginImageEditor,
FilePondPluginFilePoster
);
var pond = FilePond.create(document.querySelector('input'), {
// FilePond generic properties
filePosterMaxHeight: 256,
// FilePond Image Editor plugin properties
imageEditor: {
// Maps legacy data objects to new imageState objects (optional)
legacyDataToImageState: legacyDataToImageState,
// Used to create the editor (required)
createEditor: openEditor,
// Used for reading the image data. See JavaScript installation for details on the `imageReader` property (required)
imageReader: [
createDefaultImageReader,
{
// createDefaultImageReader options here
},
],
// Required when generating a preview thumbnail and/or output image
imageWriter: [
createDefaultImageWriter,
{
// We'll resize images to fit a 512 × 512 square
targetSize: {
width: 512,
height: 512,
},
},
],
// Used to create poster and output images, runs an invisible "headless" editor instance
imageProcessor: processImage,
// Pintura Image Editor options
editorOptions: {
// Pass the editor default configuration options
...getEditorDefaults(),
// This will set a square crop aspect ratio
imageCropAspectRatio: 1,
},
},
});
```
--------------------------------
### Integrate Pintura Editor with Angular
Source: https://pqina.nl/pintura/docs/v8/api/image-editor/properties
This Angular example integrates the Pintura image editor. It shows the component setup, template usage, and module import for the `@pqina/angular-pintura` package.
```typescript
import { Component } from '@angular/core';
import { getEditorDefaults } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults({
imageReader: { orientImage: true },
});
}
```
```html
```
```css
::ng-deep .pintura-editor {
height: 600px;
}
```
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AngularPinturaModule],
exports: [AppComponent],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
```
--------------------------------
### Install Pintura from Local Modules
Source: https://pqina.nl/pintura/docs/v8/installation/react
Installs the Pintura module from a local 'local_modules' folder and react-pintura from NPM. Useful for development or custom builds.
```bash
npm install --save @pqina/react-pintura ./local_modules/pintura
```
--------------------------------
### Pintura JavaScript Module
Source: https://pqina.nl/pintura/docs/v8/package
Includes the Pintura JavaScript Module build for integration into modern JavaScript projects. This module is designed for use with bundlers like Webpack or Rollup.
```JavaScript
import * as FilePondPluginImagePreview from 'pintura/dist/pintura.module.js';
```
--------------------------------
### Configure Private NPM Registry
Source: https://pqina.nl/pintura/docs/v8/installation/react
Sets up the .npmrc file to use the pqina private npm registry. Requires a private npm key obtained from the pqina customer portal.
```bash
@pqina:registry=https://npm.pqina.nl/
//npm.pqina.nl/:_authToken=PQINA_NPM_KEY
```
--------------------------------
### Customize Image Selection Guides with Angular
Source: https://pqina.nl/pintura/docs/v8/api/plugins/crop
This Angular example shows how to implement the cropWillRenderImageSelectionGuides callback in a component. It utilizes TypeScript for type safety and binds the callback to the PinturaEditor directive.
```typescript
import { Component } from '@angular/core';
import { getEditorDefaults } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
cropWillRenderImageSelectionGuides = (
interaction: string,
interactionFraction: number
): { rows: number; cols: number; opacity: number } => {
const isRotating = interaction === 'rotate';
return {
rows: isRotating ? 5 : 3,
cols: isRotating ? 5 : 3,
opacity: interactionFraction * 0.25,
};
};
}
```
```html
```
```css
::ng-deep .pintura-editor {
height: 600px;
}
```
--------------------------------
### jQuery Pintura Editor Integration
Source: https://pqina.nl/pintura/docs/v8/examples/download-image
Demonstrates integrating the Pintura editor using jQuery. It includes setting up the editor, handling the 'pintura:process' event to download the processed image, and basic HTML structure with necessary script includes.
```html
```
--------------------------------
### Set imageCropAspectRatio in Vue
Source: https://pqina.nl/pintura/docs/v8/api/image-editor/properties
Provides a Vue.js example for setting the image crop aspect ratio to 16:9. It demonstrates the usage of the PinturaEditor component within a Vue template and script setup.
```vue
```
--------------------------------
### Angular Module Setup for Pintura
Source: https://pqina.nl/pintura/docs/v8/examples/compress-image
This TypeScript code snippet shows the basic Angular module setup, importing necessary modules like BrowserModule and AngularPinturaModule, and bootstrapping the AppComponent.
```typescript
import {
BrowserModule
} from '@angular/platform-browser';
import {
AngularPinturaModule
} from 'angular-pintura';
import {
AppComponent
} from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [BrowserModule, AngularPinturaModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
--------------------------------
### Rotate Image with Vue
Source: https://pqina.nl/pintura/docs/v8/api/image-editor/properties
Provides an example of image rotation in a Vue.js application using the Pintura Vue component. It covers component setup, data handling, and method implementation for rotating the image.
```vue