introduction
When developing web applications, you often need to crop and edit images. It is a powerful JavaScript library that can help us realize the cropping function of images and provides a way to save cropped images locally. This article will explain how to use this feature to achieve this.
text
1. Introduce
First, we need to introduce the library into the page.
<script src="path/to/"></script>
2. Create an image cropper
In the HTML file, we need to create a container for the image cropper and add an image element to it. This container will be used to display and crop the image.
<div > <img src="path/to/" alt="Image"> </div>
3. Initialization
Next, we need to initialize it in JavaScript code and apply it to image elements.
// Get image elementsvar image = ('image');
// Initializationvar cropper = new Cropper(image, {
aspectRatio: 1, // Set the width and height ratio of the cropping frame viewMode: 2 // Set the display mode of the cropping box on the image});
4. Crop the image and save it locally
When the user completes the image cropping, we can obtain the cropped image data through the called method and save it locally.
// Get cropped image datavar croppedCanvas = ();
// Convert image data to Base64 encodingvar imageData = ('image/jpeg');
// Create a link elementvar downloadLink = ('a');
// Set the properties of the link = imageData;
= 'cropped_image.jpg'; // Set the file name to be saved// Add link to the document(downloadLink);
// Simulate click on the download link();
// Clean and remove links(downloadLink);
Complete code
<!DOCTYPE html>
<html>
<head>
<title>Image Cropping Tool</title>
<link rel="stylesheet" href="/ajax/libs/cropperjs/1.5.11/" rel="external nofollow" >
<style>
img {
width: 800px;
height: 500px;
}
</style>
</head>
<body>
<div>
<img src="/" >
</div>
<button onclick="save()"> save </button>
<script src="/ajax/libs/cropperjs/1.5.11/"></script>
<script>
var image = ('image');
var fixedWidth = 300; // Set the fixed width of the cropping result var fixedHeight = 200; // Set the fixed height of the crop result var aspectRatio = fixedWidth / fixedHeight; // Calculate aspect ratio // Create a Cropper instance, set the aspect ratio, prohibit moving and scaling the crop box, prohibit re-boxing selection var cropper = new Cropper(image, {
viewMode: 2 // Set the display mode of the cropping box on the image });
function save(){
// Get the cropping result (return to the cropped image data) var imageData = ().toDataURL('image/png'); // Get Base64 encoded image data // Create a link element var downloadLink = ('a');
// Set the properties of the link = imageData;
= 'cropped_image.png'; // Set the file name to be saved // Add link to the document (downloadLink);
// Simulate click on the download link ();
// Clean and remove links (downloadLink);
}
</script>
</body>
</html>The above is the detailed content of the advanced cropping and saving to local implementation example. For more information about cropping and saving local content, please pay attention to my other related articles!