Add a watermark to the image
We can use the postProcessImageData hook on the createDefaultImageWriter function to add a watermark to the imageData before the output file is created.
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',
imageWriter: {
targetSize: {
width: 512,
height: 512,
fit: 'contain',
},
postprocessImageData: (imageData) =>
new Promise((resolve, reject) => {
// Create a canvas element to handle the imageData
const canvas = document.createElement('canvas');
canvas.width = imageData.width;
canvas.height = imageData.height;
const ctx = canvas.getContext('2d');
ctx.putImageData(imageData, 0, 0);
// Draw our watermark on top
const watermark = new Image();
watermark.onload = () => {
// how to draw the image to the canvas
ctx.globalCompositeOperation = 'screen';
// draw the watermark in the top right corner
ctx.drawImage(
watermark,
// the watermark x and y position
imageData.width - 100 - 20,
20,
// the watermark width and height
100,
40
);
// Get and return the modified imageData
resolve(
ctx.getImageData(
0,
0,
imageData.width,
imageData.height
)
);
};
watermark.onerror = reject;
watermark.crossOrigin = 'Anonymous';
watermark.src = './my-watermark.svg';
}),
},
});
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',
},
postprocessImageData: (imageData) =>
new Promise((resolve, reject) => {
// Create a canvas element to handle the imageData
const canvas = document.createElement('canvas');
canvas.width = imageData.width;
canvas.height = imageData.height;
const ctx = canvas.getContext('2d');
ctx.putImageData(imageData, 0, 0);
// Draw our watermark on top
const watermark = new Image();
watermark.onload = () => {
// how to draw the image to the canvas
ctx.globalCompositeOperation = 'screen';
// draw the watermark in the top right corner
ctx.drawImage(
watermark,
// the watermark x and y position
imageData.width - 100 - 20,
20,
// the watermark width and height
100,
40
);
// Get and return the modified imageData
resolve(
ctx.getImageData(
0,
0,
imageData.width,
imageData.height
)
);
};
watermark.onerror = reject;
watermark.crossOrigin = 'Anonymous';
watermark.src = './my-watermark.svg';
}),
},
});
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'}
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"
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',
},
postprocessImageData: (imageData) =>
new Promise((resolve, reject) => {
// Create a canvas element to handle the imageData
const canvas = document.createElement('canvas');
canvas.width = imageData.width;
canvas.height = imageData.height;
const ctx = canvas.getContext('2d');
ctx.putImageData(imageData, 0, 0);
// Draw our watermark on top
const watermark = new Image();
watermark.onload = () => {
// how to draw the image to the canvas
ctx.globalCompositeOperation = 'screen';
// draw the watermark in the top right corner
ctx.drawImage(
watermark,
// the watermark x and y position
imageData.width - 100 - 20,
20,
// the watermark width and height
100,
40
);
// Get and return the modified imageData
resolve(
ctx.getImageData(
0,
0,
imageData.width,
imageData.height
)
);
};
watermark.onerror = reject;
watermark.crossOrigin = 'Anonymous';
watermark.src = './my-watermark.svg';
}),
},
}),
};
},
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',
},
postprocessImageData: (imageData) =>
new Promise((resolve, reject) => {
// Create a canvas element to handle the imageData
const canvas = document.createElement('canvas');
canvas.width = imageData.width;
canvas.height = imageData.height;
const ctx = canvas.getContext('2d');
ctx.putImageData(imageData, 0, 0);
// Draw our watermark on top
const watermark = new Image();
watermark.onload = () => {
// how to draw the image to the canvas
ctx.globalCompositeOperation = 'screen';
// draw the watermark in the top right corner
ctx.drawImage(
watermark,
// the watermark x and y position
imageData.width - 100 - 20,
20,
// the watermark width and height
100,
40
);
// Get and return the modified imageData
resolve(
ctx.getImageData(
0,
0,
imageData.width,
imageData.height
)
);
};
watermark.onerror = reject;
watermark.crossOrigin = 'Anonymous';
watermark.src = './my-watermark.svg';
}),
},
});
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'}
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',
},
postprocessImageData: (imageData) =>
new Promise((resolve, reject) => {
// Create a canvas element to handle the imageData
const canvas = document.createElement('canvas');
canvas.width = imageData.width;
canvas.height = imageData.height;
const ctx = canvas.getContext('2d');
ctx.putImageData(imageData, 0, 0);
// Draw our watermark on top
const watermark = new Image();
watermark.onload = () => {
// how to draw the image to the canvas
ctx.globalCompositeOperation = 'screen';
// draw the watermark in the top right corner
ctx.drawImage(
watermark,
// the watermark x and y position
imageData.width - 100 - 20,
20,
// the watermark width and height
100,
40
);
// Get and return the modified imageData
resolve(
ctx.getImageData(
0,
0,
imageData.width,
imageData.height
)
);
};
watermark.onerror = reject;
watermark.crossOrigin = 'Anonymous';
watermark.src = './my-watermark.svg';
}),
},
});
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"
(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',
imageWriter: {
targetSize: {
width: 512,
height: 512,
fit: 'contain',
},
postprocessImageData: (imageData) =>
new Promise((resolve, reject) => {
// Create a canvas element to handle the imageData
const canvas = document.createElement('canvas');
canvas.width = imageData.width;
canvas.height = imageData.height;
const ctx = canvas.getContext('2d');
ctx.putImageData(imageData, 0, 0);
// Draw our watermark on top
const watermark = new Image();
watermark.onload = () => {
// how to draw the image to the canvas
ctx.globalCompositeOperation = 'screen';
// draw the watermark in the top right corner
ctx.drawImage(
watermark,
// the watermark x and y position
imageData.width - 100 - 20,
20,
// the watermark width and height
100,
40
);
// Get and return the modified imageData
resolve(
ctx.getImageData(
0,
0,
imageData.width,
imageData.height
)
);
};
watermark.onerror = reject;
watermark.crossOrigin = 'Anonymous';
watermark.src = './my-watermark.svg';
}),
},
});
editor.on('pintura:process', function (event) {
const imageState = event.detail;
$('img').attr('src', URL.createObjectURL(imageState.dest));
});
});
</script>
