Image Editor
I want to have a page that makes it easy to quickly edit images / get information about images. Right now, I usually have to run a script or go to a website and upload an image to get the information about an image, and I figure creating my own page for this would be faster. Also, there are many times when I want to resize an image and add a background color around the image (in case the aspect ratio of the original image does not meet the target resize dimensions), and I hope to create this feature on this page.
I want to get better acquainted with the
Pintura image editor
. This is the image editor that I use for this site, and I want to study the documentation of the image editor so that I know what is available and how I might better customize the editor.
- You can use the appendEditor method to easily append an image editor to the DOM.
The Image Editor
Properties
- Image Editor Properties
- You can get the image source, width, height, and aspect ratio of the image and the crop rectangle with readonly image properties.
- You can set the src of the image editor to load a new image into the editor. You can use the imageReader and imageWriter properties to read and write image data.
- There are various properties that you can set to update the image state, but I didn't see any that I would use.
- You have access to the imageState property, which describes the current image state.
Methods
| Name | Description |
|---|---|
| editImage(src, options?) | Load an Image. Returns a Promise that resolves when the image is processed. |
| loadImage(src, options?) | Load an Image. Returns a Promise that resolves when the image is loaded. |
| abortLoadImage() | Stop loading the current image. |
| removeImage() | Removes the currently loaded image. |
| processImage(src?, options?) | Start processing the current image. Or loads a new image and immediately processes it. |
| abortProcessImage() | Stop processing the current image. |
| updateImage(src) | Updates the current image source while retaining the history state. Will also update image preview. Returns a Promise that resolves when the image is loaded. |
Events
| Name: | Description: |
|---|---|
| loadstart | Fires when the image loading starts |
| loadabort | Fired when the image loading is aborted |
| loaderror | Fired when an error is thrown during image load. |
| loadprogress | Fired when loading of the image progresses. |
| load | Fired when an image has successfully loaded. |
| loadpreview | Fired when an image preview has been loaded. |
| update | Fired when the imageState is updated |
| processstart | Fired when processing of an image starts |
| processerror | Fired when an error is thrown during image processing. |
| processprogress | Fired when processing of the image progresses. |
| process | Fired when an image has been processed. |
Exports
-
I don't think I will use any of these functions.
Upload, Edit, and Download Images
How To Use:
- Move your mouse over the <canvas> to see what the color of the highlighted portion of the image is.
- Click the canvas to copy the current color.
Last Seen Colors:
Hex Color:
RGBA Color:
Resize Image With Background Color
The Pintura Image Editor allows you to resize images, but the image is resized in a way that ignores the aspect ratio. In cases where you want to resize an image, keep the aspect ratio, and the aspect ratio does not equal the aspect ratio of the target width and height, you often times want to add a background color around the image so that the resulting image keeps aspect ratio of the original image and is resized to the correct size.