You want to upload images in an angular application,Do i want to limit the size of the uploaded image on the front end before the image is uploaded?The ng2-img-max module is exactly what i want! The ng2-img-max module uses web sorkers for image size calculations.And resides in the main thread.
Let's take a look at his use:
installation
First, install the module using npm or yarn:
$npm install ng2-img-max blueimp-canvas-to-blob --save
#or yarn:
$yarn add ng2-img-max blueimp-canvas-to-blob
blueimp-canvas-to-blob is a polyfill so thatcanvas.toblob ()
can be used on browsers such as safari and older versions of internet explorer.
Include polyfill scripts in your project. If you use angular cli, you can add scripts to it.angular-cli.json file:
//:.angular-cli.json
...
"scripts":[
"../node_modules/blueimp-canvas-to-blob/js/canvas-to-blob.min.js"
],//...
After adding the script to the angular cli configuration, you will need to restart the local service.
Now we import the module into the application module or function module:
//:app.module.ts
//...
import {ng2imgmaxmodule} from "ng2-img-max";
@ngmodule ({
declarations:[appcomponent], imports:[
//...
ng2imgmaxmodule
], providers:[], bootstrap:[appcomponent]
})
export class appmodule {}
Finally, the ng2-img-max service can be imported and injected into such a component:
import {component} from "@ angular/core";
import {ng2imgmaxservice} from "ng2-img-max";
@component ({...})
export class appcomponent {
constructor (private ng2imgmax:ng2imgmaxservice) {}
}
use
We add a file input box to the component's template,like this:
<input type="file" (change)="onimagechange ($event)" accept="image/*" />
Add the method onimagechange in the component class, it will limit the width and height of the image to:400px, 300px:
updateimage:blob;
constructor (private ng2imgmax:ng2imgmaxservice) {}
onimagechange (event) {
let image=event.target.files [0];
this.ng2imgmax.resizeimage (image, 400,300) .subscribe (result =>{
this.uploadimage=result;
}, error =>{
console.log ("error:", error);
})
}
If you have multiple images that need to be resized at once,Please use the resize method instead and pass the image file array as the first parameter.
The result is a blob type, but if needed,It can be converted to the correct file using the file constructor:
//:app.component.ts
uploadedimage:file;
constructor (private ng2imgmax:ng2imgmaxservice) {}
onimagechange (event) {
let image=event.target.files [0];
this.ng2imgmax.resizeimage (image, 400,300) .subscribe (result =>{
this.uploadedimage=new file ([result], result.name);
}, error =>{
console.log ("error", error);
})
}
You can now upload files to your backend. Don't forget to do validation on the backend,Because the content here will prevent some users from uploading oversized or non-image files directly to the backend.
Limit only width or height
Let's say i want to limit the height to 300px and adjust the width accordingly,To keep the aspect ratio the same. Just set any threshold to 10000:
//...
onimagechange (event) {
let image=event.target.files [0];
this.ng2imgmax.resizeimage (image, 10000,300) .subscribe (result =>{
this.uploadedimage=new file ([result], result.name);
}, error =>{
console.log ("error:", error);
});
}
Compression instead of resizing
You can also perform lossy compression using the compress or compressimage methods,Instead of resizing the image. Just pass the maximum value (megabytes). You obviously want to run some tests,See how far i want to go for hours,While keeping the image look good.
In the following example,We limit the generated image to about 75kb:
onimagechange (event) {
let image=event.target.files [0];
this.ng2imgmax.compressimage (image, 0.075) .subscribe (
result =>{
this.uploadedimage=new file ([result], result.name);
this.getimagepreview (this.uploadedimage);
}, error =>{
console.log ("😢oh no!", error);
}
);
}
Picture Preview
You may want to preview the images i want to upload to your users. You can do this using a filereader object. You also need to use angular's domsanitizer to make it trust the base64-encoded data uri created using the filereader object:
Now, our component content looks like this.An interesting new method in the component is getimagepreview:
//:app.component.ts
import {component} from "@ angular/core";
import {ng2imgmaxservice} from "ng2-img-max";
import {domsanitizer} from "@ angular/platform-browser";
@component ({...})
export class appcomponent {
uploadedimage:file;
imagepreview:string;
constructor (
private ng2imgmax:ng2imgmaxservice, public sanitizer:domsanitizer
) {}
onimagechange (event) {
let image=event.target.files [0];
this.ng2imgmax.resizeimage (image, 10000, 375) .subscribe (
result =>{
this.uploadedimage=new file ([result], result.name);
this.getimagepreview (this.uploadedimage);
}, error =>{
console.log ("😢oh no!", error);
}
);
}
getimagepreview (file:file) {
const reader:filereader=new filereader ();
reader.readasdataurl (file);
reader.onload=() =>{
this.imagepreview=reader.result;
};
}
}
In our template,We can use sanitizer to display images such as:
//:app.component.html
<img
* ngif="imagepreview"
[src]="sanitizer.bypasssecuritytrusturl (imagepreview)">
That's all there is to it! You can also check out the ng2-img-tools package of the same author for more browser-side image processing (such as cropping).
Related articles
- python image output: want to adjust frame position and legend
- Java image and text submit to the form example code
- Pytoch torchvisiontransforms image transformation example
- Example of pytorch image preprocessing minus mean, divided by variance
- Flask example of uploading an image and scaling it as an avatar
- pytorch color image to grayscale image example
- Python read dicom image example (SimpleITK and dicom package implementation)
- Example of image channel separation and merge in python
- Example of vertical projection of image with Python
- Example implementation of random rotation of an image using TensorFlow
- Opencv python image gradient example
- Python read xml data, cv2 crop image example
- html5 - the image in the 30th column is not displayed in the browser please tell me the problem
- Python cut image into nine grid example code
- Example of cropping a tiff image and reading tiff, shp files using Python
- Example implementation of Net Core image verification code
- Usage example based on python image processing API
- Example of mobile terminal image zoom function component implemented by jQuery
- php - i want to display an image in the browser from the path of the image registered in the database
- html5 - the image is not displayed when opening the html file in a browser