The important option is the crop method, one of many possible event methods. We’re also going to define a crop box with a square aspect ratio. In other words we’re only going to allow moving and cropping. There are quite a few to choose from, but for us, we’re going to disable zooming and scaling of our image. During the initialization process we can define a few options. Inside the ngAfterViewInit method we initialize our Cropper using the entire imageElement that we obtained from the HTML. To do this we can make use of the ngAfterViewInit method. The is referring to a possible attribute called src which we’ll see later.īecause we’re working with elements in the view, we need to wait until the view has initialized before we make any attempts. Remember that #image reference from the HTML file? We’re accessing it through the and mapping it to a variable to be used within our TypeScript code. It isn’t much, but it is still good to know.Īt the top we are importing the cropperjs package that we had previously downloaded and installed. The above code is complete, but we’re going to break it down to explain what is happening. If you’re using an older or newer version, things may vary slightly. For context, I’m using Angular 8.0.2 in this example. Create a New Angular Project for the Webīefore getting too involved with this tutorial, the assumption is that you’ve got the Angular CLI installed and configured. This image preview is an entirely new image that represents our manipulations and it can be downloaded as such. Altering the crop box will affect the image preview to the right of the source image. In the above animation you’ll notice a source image which has a crop box. To get an idea of what we’re going to accomplish, take a look at the following animated image: We’re going to see how to include image manipulation capabilities in your Angular application using the popular cropperjs JavaScript package. If the user tries to upload an image that doesn’t meet your requirements, it might break your theme. In theory this is a simple task, but in reality, your website theme is probably anticipating images of a certain resolution or aspect ratio. When building a web application there is a good chance you’re going to need to work with images eventually, even if it is something as simple as allowing a user to upload a profile image.
0 Comments
Leave a Reply. |