Add an image and video editor to your Angular app.
Mastershot’s editor is a standalone Angular component, for Angular 17 and up. Your visitors crop, turn, trim, pixelate, and resize their photos and videos in your app, and your code gets the edited file. It all runs in their browser.
Install the Angular component
Install the editor and its Angular package from npm. They come with TypeScript types, and there’s no stylesheet to import.
bash
npm install @mastershot/editor @mastershot/angular-editor- [options] takes every option, and each event is an output of the same name, such as (process) or (load). Changing an input changes the editor straight away, with the edits kept.
- The component’s editor is the editor itself, for its methods.
- The editor loads only in the browser, after the view is ready, so server rendering never runs it.
ts
import { Component } from "@angular/core"
import { MastershotEditorComponent } from "@mastershot/angular-editor"
import type { WriterOutput } from "@mastershot/editor"
@Component({
selector: "app-photo-editor",
standalone: true,
imports: [MastershotEditorComponent],
template: `
<mastershot-editor
[src]="file"
[options]="{ utils: ['crop', 'resize'], imageCropAspectRatio: 1 }"
licenseKey="MSE-…"
(process)="save($event)"
style="height: 600px"
/>
`,
})
export class PhotoEditorComponent {
file?: File
save({ dest }: WriterOutput) {
// dest is the edited File
}
}What your visitors can do
Photos
Opens JPG, PNG, WebP, AVIF, HEIC, GIF, BMP, TIFF, and SVG, and saves JPG, PNG, or WebP.
- Crop freely or to a shape such as 1:1, 4:5, or 16:9, or to your own sizes for avatars and banners.
- Turn in quarter turns, or straighten with a slider that keeps the crop level with no empty corners.
- Flip across or up and down.
- Pixelate or blur faces, number plates, or text, or the whole photo.
- Black and white, or inverted colors.
- Save at an exact width and height in pixels.
Videos
Opens MP4, MOV, WebM, and MKV, and saves in the video’s own format where it can, otherwise MP4.
- Keep one part of a video, or several parts joined back to back.
- Crop, turn, flip, and resize with the same tools as photos.
- Take the sound out.
- Saved at no more than the video’s own quality.
On your site
One JavaScript library from our CDN or npm, in plain HTML or with React, Vue, Svelte, or Angular.
- Takes on your site’s colors, corners, and font, in light and dark.
- Sits inside your page, or opens over it.
- Show only the tools you want, and the crop shapes and sizes that fit your site.
- Undo and redo, and edits that can be saved and opened again later.
- Works on phones and computers, in Chrome, Edge, Firefox, and Safari.
Questions
No. It works in apps with or without zone.js.
Yes. The same component opens photos and videos. Visitors keep one part of a video or several, crop, turn, resize, and take the sound out, and (process) hands you the edited file.
Yes. The editor loads only in the browser, after the view is ready, so Angular’s server rendering never runs it.
No. The editor opens and saves files in your visitor’s browser, and nothing goes to Mastershot. Your code gets the edited file and decides where it goes.
It’s free on localhost, private networks, and .test or .local names, with no key or sign-up. A live site needs a yearly plan for your company, from $129, which covers every developer on your team.
The editor in other frameworks
It’s the same editor in React, Vue, and Svelte, and in plain HTML with one script.