How to use HTML, CSS and jQuery to implement advanced image cropping and zooming functions

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:

1. Picture selection: The user can select the picture that needs to be cropped and zoomed by clicking the button or dragging the picture to the designated area;
2. Picture cropping: The user can select the area to be cropped by dragging the mouse;
3. Picture scaling: The user can zoom the picture by sliding the slider or entering specific values;
4. Picture saving : The user can click the save button to save the cropped and zoomed image locally or upload it to the server.

2. HTML structure:
The following is the HTML structure required to implement the image cropping and zooming function:

<div id="image-container">
  <input type="file" id="image-upload" accept="image/*">
  <div class="image-preview"></div>
  <button id="btn-crop">裁剪</button>
  <button id="btn-zoom-in">放大</button>
  <button id="btn-zoom-out">缩小</button>
  <button id="btn-save">保存</button>
</div>

In the above code, we use a tag serves as an image container, and the image selection function is implemented through the <input> tag. The <div> tag is used to display the selected image, through the <code> <button></button> tag implements cropping, zooming and saving functions.

3. CSS styles:
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%;
}

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:
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);
    }
  });
});

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 change event to obtain the selected image, and use the mousedown, mousemove and mouseup events 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.

Summary:
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.