How to use HTML, CSS and jQuery to implement advanced functions of image cropping and scaling
Introduction:
With the development of the Internet, the application of images is becoming more and more common. , and cropping and scaling pictures are common needs. This article will introduce how to use HTML, CSS and jQuery to implement advanced functions of image cropping and scaling, and provide you with specific code examples.
1. Design principles:
Before we start writing code, we need to understand some design principles. The advanced functions of image cropping and zooming mainly include the following aspects:
2. HTML structure:
The following is the HTML structure required to implement the image cropping and zooming function:
In the above code, we use a 3. CSS styles: In the above code, we use some basic styles, such as setting the container Width, height, border, and image preview style, etc. 4. JavaScript code: In the above code, we use jQuery to implement image selection and cropping , zoom and save functions. Listen to the changes in the input box through the Summary: The above is the detailed content of How to use HTML, CSS and jQuery to implement advanced image cropping and zooming functions. For more information, please follow other related articles on the PHP Chinese website!< The div>tag serves as an image container, and the image selection function is implemented through thetag. Thetag is used to display the selected image, through the
tag implements cropping, zooming and saving functions.
The following are the CSS styles required to implement the image cropping and scaling function:
#image-container { position: relative; width: 400px; height: 300px; border: 1px solid #ccc; overflow: hidden; } .image-preview { width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; } #btn-crop, #btn-zoom-in, #btn-zoom-out, #btn-save { display: block; margin: 10px 0; } #btn-crop, #btn-save { width: 100%; }
Copy after login
The following is the JavaScript code required to implement the image cropping and zooming function:
$(document).ready(function() { // 图片选择 $('#image-upload').change(function(e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function(e) { $('.image-preview').css('background-image', 'url(' + e.target.result + ')'); } reader.readAsDataURL(file); }); // 图片裁剪 var crop = false; var startX, startY; $('.image-preview').mousedown(function(e) { crop = true; startX = e.pageX - $(this).offset().left; startY = e.pageY - $(this).offset().top; }); $('.image-preview').mousemove(function(e) { if (crop) { var width = e.pageX - $(this).offset().left - startX; var height = e.pageY - $(this).offset().top - startY; $(this).css('background-position', -startX + 'px ' + -startY + 'px'); $(this).css('background-size', (width + 'px') + ' ' + (height + 'px')); } }); $(window).mouseup(function() { crop = false; }); // 图片缩放 var zoom = 1; $('#btn-zoom-in').click(function() { zoom += 0.1; $('.image-preview').css('transform', 'scale(' + zoom + ')'); }); $('#btn-zoom-out').click(function() { zoom -= 0.1; $('.image-preview').css('transform', 'scale(' + zoom + ')'); }); // 图片保存 $('#btn-save').click(function() { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); var img = new Image(); img.src = $('.image-preview').css('background-image').slice(5, -2); img.onload = function() { canvas.width = img.width; canvas.height = img.height; context.drawImage(img, 0, 0); var dataURL = canvas.toDataURL('image/png'); window.open(dataURL); } }); });
Copy after login
changeevent to obtain the selected image, and use themousedown,mousemoveandmouseupevents to implement the image cropping function. Click the zoom-in and zoom-out buttons to realize the zoom function of the picture, and click the save button to save the cropped and zoomed picture locally.
This article introduces how to use HTML, CSS and jQuery to implement advanced functions of image cropping and scaling. Custom processing of images can be achieved through selection, cropping, zooming and saving functions. I hope this article can be helpful to you and enable you to better apply this function in actual projects.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
