Using template placeholder values in text shapes
We can use the preprocessImageState hook exposed by the createDefaultImageWriter function to automatically replace placeholder values with real values when creating the output image.
JavaScript
React
Vue
Svelte
Angular
jQuery<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./pintura.css" />
</head>
<img src="" alt="" />
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script type="module">
import { appendDefaultEditor, processImage } from './pintura.js';
const editor = appendDefaultEditor('#editor', {
src: 'image.jpeg',
imageAnnotation: [
{
x: 128,
y: 128,
fontSize: 96,
fontWeight: 'bold',
color: [1, 1, 1],
// We'll replace {name} when processing the image
text: 'Hello {name}',
},
],
imageWriter: {
targetSize: {
width: 512,
height: 512,
fit: 'contain',
},
preprocessImageState: (imageState) => {
// Create new annotation array
imageState.annotation = imageState.annotation.map((shape) => {
// This is not a text shape so skip
if (!shape.text) return shape;
// Replace placeholders in text properties
shape.text = shape.text.replace(/{name}/g, 'John Connor');
return shape;
});
// Return updated image state
return imageState;
},
},
});
editor.on('process', (imageState) => {
document.querySelector('img').src = URL.createObjectURL(
imageState.dest
);
});
</script>
import '@pqina/pintura/pintura.css';
import './App.css';
import { useState } from 'react';
import { PinturaEditor } from '@pqina/react-pintura';
import { processImage, getEditorDefaults } from '@pqina/pintura';
const editorDefaults = getEditorDefaults({
imageWriter: {
targetSize: {
width: 512,
height: 512,
fit: 'contain',
},
preprocessImageState: (imageState) => {
// Create new annotation array
imageState.annotation = imageState.annotation.map((shape) => {
// This is not a text shape so skip
if (!shape.text) return shape;
// Replace placeholders in text properties
shape.text = shape.text.replace(/{name}/g, 'John Connor');
return shape;
});
// Return updated image state
return imageState;
},
},
});
function App() {
const [editorResult, setEditorResult] = useState(undefined);
const handleEditorProcess = (imageState) => {
setEditorResult(URL.createObjectURL(imageState.dest));
};
return (
<div className="App">
{editorResult && <img alt="" src={editorResult} />}
<PinturaEditor
{...editorDefaults}
src={'image.jpeg'}
imageAnnotation={[
{
x: 128,
y: 128,
fontSize: 96,
fontWeight: 'bold',
color: [1, 1, 1],
// We'll replace {name} when processing the image
text: 'Hello {name}',
},
]}
onProcess={handleEditorProcess}
/>
</div>
);
}
export default App;
.pintura-editor {
height: 600px;
}
<template>
<div>
<img v-if="editorResult" alt="" :src="editorResult" />
<PinturaEditor
v-bind="editorDefaults"
src="image.jpeg"
:imageAnnotation="imageAnnotation"
v-on:pintura:process="handleEditorProcess($event)"
/>
</div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { processImage, getEditorDefaults } from '@pqina/pintura';
export default {
name: 'App',
components: {
PinturaEditor,
},
data() {
return {
editorResult: undefined,
editorDefaults: getEditorDefaults({
imageWriter: {
targetSize: {
width: 512,
height: 512,
fit: 'contain',
},
preprocessImageState: (imageState) => {
// Create new annotation array
imageState.annotation = imageState.annotation.map(
(shape) => {
// This is not a text shape so skip
if (!shape.text) return shape;
// Replace placeholders in text properties
shape.text = shape.text.replace(
/{name}/g,
'John Connor'
);
return shape;
}
);
// Return updated image state
return imageState;
},
},
}),
imageAnnotation: [
{
x: 128,
y: 128,
fontSize: 96,
fontWeight: 'bold',
color: [1, 1, 1],
// We'll replace {name} when processing the image
text: 'Hello {name}',
},
],
};
},
methods: {
handleEditorProcess: function (imageState) {
this.editorResult = URL.createObjectURL(imageState.dest);
},
},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';
.pintura-editor {
height: 600px;
}
</style>
<script>
import { PinturaEditor } from '@pqina/svelte-pintura';
import { processImage, getEditorDefaults } from '@pqina/pintura';
import '@pqina/pintura/pintura.css';
let editorResult = undefined;
let editorDefaults = getEditorDefaults({
imageWriter: {
targetSize: {
width: 512,
height: 512,
fit: 'contain',
},
preprocessImageState: (imageState) => {
// Create new annotation array
imageState.annotation = imageState.annotation.map((shape) => {
// This is not a text shape so skip
if (!shape.text) return shape;
// Replace placeholders in text properties
shape.text = shape.text.replace(/{name}/g, 'John Connor');
return shape;
});
// Return updated image state
return imageState;
},
},
});
const handleEditorProcess = (event) => {
const imageState = event.detail;
editorResult = URL.createObjectURL(imageState.dest);
};
</script>
<div>
{#if editorResult} <img alt="" src={editorResult} /> {/if}
<PinturaEditor
{...editorDefaults}
src={'image.jpeg'}
imageAnnotation={[
{
x: 128,
y: 128,
fontSize: 96,
fontWeight: 'bold',
color: [1, 1, 1],
// We'll replace {name} when processing the image
text: 'Hello {name}',
},
]}
on:process={handleEditorProcess}
/>
</div>
<style>
div :global(.pintura-editor) {
height: 600px;
}
</style>
import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { processImage, getEditorDefaults } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
constructor(private domSanitizer: DomSanitizer) {}
editorResult?: string = undefined;
editorDefaults: any = getEditorDefaults({
imageWriter: {
targetSize: {
width: 512,
height: 512,
fit: 'contain',
},
preprocessImageState: (imageState) => {
// Create new annotation array
imageState.annotation = imageState.annotation.map((shape) => {
// This is not a text shape so skip
if (!shape.text) return shape;
// Replace placeholders in text properties
shape.text = shape.text.replace(/{name}/g, 'John Connor');
return shape;
});
// Return updated image state
return imageState;
},
},
});
imageAnnotation: any = [
{
x: 128,
y: 128,
fontSize: 96,
fontWeight: 'bold',
color: [1, 1, 1],
// We'll replace {name} when processing the image
text: 'Hello {name}',
},
];
handleEditorProcess(imageState: any): void {
this.editorResult = <string>(
this.domSanitizer.bypassSecurityTrustResourceUrl(
URL.createObjectURL(imageState.dest)
)
);
}
}
<img *ngIf="editorResult" [src]="editorResult" alt="" />
<pintura-editor
[options]="editorDefaults"
src="image.jpeg"
[imageAnnotation]="imageAnnotation"
(process)="handleEditorProcess($event)"
></pintura-editor>
::ng-deep .pintura-editor {
height: 600px;
}
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 {}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./pintura/pintura.css" />
</head>
<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>
<img src="" alt="" />
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script>
useEditorWithJQuery(jQuery, pintura);
$(function () {
var { processImage } = $.fn.pintura;
var editor = $('#editor').pinturaDefault({
src: 'image.jpeg',
imageAnnotation: [
{
x: 128,
y: 128,
fontSize: 96,
fontWeight: 'bold',
color: [1, 1, 1],
// We'll replace {name} when processing the image
text: 'Hello {name}',
},
],
imageWriter: {
targetSize: {
width: 512,
height: 512,
fit: 'contain',
},
preprocessImageState: (imageState) => {
// Create new annotation array
imageState.annotation = imageState.annotation.map(
(shape) => {
// This is not a text shape so skip
if (!shape.text) return shape;
// Replace placeholders in text properties
shape.text = shape.text.replace(
/{name}/g,
'John Connor'
);
return shape;
}
);
// Return updated image state
return imageState;
},
},
});
editor.on('pintura:process', function (event) {
const imageState = event.detail;
$('img').attr('src', URL.createObjectURL(imageState.dest));
});
});
</script>
