Apply a circular mask to the image
We can use the postProcessImageData property on the createDefaultImageWriter function to change the imageData before the output file is created.
To show a circular overlay in the editor itself see the circular crop overlay example.
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',
imageCropAspectRatio: 1,
imageWriter: {
// Scale down the output image
targetSize: {
width: 256,
height: 256,
},
// Convert to PNG so masked area is transparent
mimeType: 'image/png',
// Run custom processing on the image data
postprocessImageData: (imageData) =>
new Promise((resolve) => {
// 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);
// Only draw image where we render our circular mask
ctx.globalCompositeOperation = 'destination-in';
// Draw our circular mask
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(
imageData.width * 0.5,
imageData.height * 0.5,
imageData.width * 0.5,
0,
2 * Math.PI
);
ctx.fill();
// Returns the modified imageData
resolve(
ctx.getImageData(0, 0, canvas.width, canvas.height)
);
}),
},
});
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: {
// Scale down the output image
targetSize: {
width: 256,
height: 256,
},
// Convert to PNG so masked area is transparent
mimeType: 'image/png',
// Run custom processing on the image data
postprocessImageData: (imageData) =>
new Promise((resolve) => {
// 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);
// Only draw image where we render our circular mask
ctx.globalCompositeOperation = 'destination-in';
// Draw our circular mask
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(
imageData.width * 0.5,
imageData.height * 0.5,
imageData.width * 0.5,
0,
2 * Math.PI
);
ctx.fill();
// Returns the modified imageData
resolve(ctx.getImageData(0, 0, canvas.width, canvas.height));
}),
},
});
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'}
imageCropAspectRatio={1}
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"
:imageCropAspectRatio="1"
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: {
// Scale down the output image
targetSize: {
width: 256,
height: 256,
},
// Convert to PNG so masked area is transparent
mimeType: 'image/png',
// Run custom processing on the image data
postprocessImageData: (imageData) =>
new Promise((resolve) => {
// 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);
// Only draw image where we render our circular mask
ctx.globalCompositeOperation = 'destination-in';
// Draw our circular mask
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(
imageData.width * 0.5,
imageData.height * 0.5,
imageData.width * 0.5,
0,
2 * Math.PI
);
ctx.fill();
// Returns the modified imageData
resolve(
ctx.getImageData(
0,
0,
canvas.width,
canvas.height
)
);
}),
},
}),
};
},
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: {
// Scale down the output image
targetSize: {
width: 256,
height: 256,
},
// Convert to PNG so masked area is transparent
mimeType: 'image/png',
// Run custom processing on the image data
postprocessImageData: (imageData) =>
new Promise((resolve) => {
// 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);
// Only draw image where we render our circular mask
ctx.globalCompositeOperation = 'destination-in';
// Draw our circular mask
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(
imageData.width * 0.5,
imageData.height * 0.5,
imageData.width * 0.5,
0,
2 * Math.PI
);
ctx.fill();
// Returns the modified imageData
resolve(
ctx.getImageData(0, 0, canvas.width, canvas.height)
);
}),
},
});
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'}
imageCropAspectRatio={1}
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: {
// Scale down the output image
targetSize: {
width: 256,
height: 256,
},
// Convert to PNG so masked area is transparent
mimeType: 'image/png',
// Run custom processing on the image data
postprocessImageData: (imageData) =>
new Promise((resolve) => {
// 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);
// Only draw image where we render our circular mask
ctx.globalCompositeOperation = 'destination-in';
// Draw our circular mask
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(
imageData.width * 0.5,
imageData.height * 0.5,
imageData.width * 0.5,
0,
2 * Math.PI
);
ctx.fill();
// Returns the modified imageData
resolve(
ctx.getImageData(0, 0, canvas.width, canvas.height)
);
}),
},
});
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"
[imageCropAspectRatio]="1"
(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',
imageCropAspectRatio: 1,
imageWriter: {
// Scale down the output image
targetSize: {
width: 256,
height: 256,
},
// Convert to PNG so masked area is transparent
mimeType: 'image/png',
// Run custom processing on the image data
postprocessImageData: (imageData) =>
new Promise((resolve) => {
// 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);
// Only draw image where we render our circular mask
ctx.globalCompositeOperation = 'destination-in';
// Draw our circular mask
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(
imageData.width * 0.5,
imageData.height * 0.5,
imageData.width * 0.5,
0,
2 * Math.PI
);
ctx.fill();
// Returns the modified imageData
resolve(
ctx.getImageData(0, 0, canvas.width, canvas.height)
);
}),
},
});
editor.on('pintura:process', function (event) {
const imageState = event.detail;
$('img').attr('src', URL.createObjectURL(imageState.dest));
});
});
</script>
