1024programmer Java Detailed explanation of JavaScript code for free editing of images

Detailed explanation of JavaScript code for free editing of images

Currently, our project needs a function that can freely edit pictures. When pictures may require frequent editing, and at the same time, when we find that we are not satisfied with the cropping and want to fine-tune it, we will find that if we process the pictures according to our usual habits, such as cropping Uploading to the server or converting to base64 does not meet the requirements. So how to deal with it better? How to solve application scenarios with as few network requests as possible and occupying as little storage as possible? Then, we thought of using only pure data to deal with our functions.

First, let’s start with cropperjs, a tool for cropping images. Personally, I think it is a component library that is easy to use and has complete configuration and API methods.

Introduced into the project, be sure not to miss the reference style

 import Cropper from 'cropperjs';
 import 'cropperjs/dist/cropper.css';

Here we take react as an example

 this.state = {
 width: 640, //image display width
 height: 360, //image display height
 imgWidth: 640, //The actual width of the picture
 imgHeight: 360, //The actual height of the picture
 imgLeft: 0, //image left offset
 imgTop: 0, //Offset on the image
 editing: false //Whether editing is in progress
 //Display the basic dom structure of the image. We use the form of outer div and inner img to control the display of the cropped image in combination with data.
 const { width, height, imgWidth, imgHeight, imgLeft, imgTop, editing } = this.state;
 const cOntainerStyle= {
 width: `${width}px`,
 height: `${height}px`
 const imgStyle = {
 width: `${imgWidth}px`,
 height: `${imgHeight}px`,
 left: `${imgLeft}px`,
 top: `${imgTop}px`
 .img-container {
 overflow: hidden;
 position: relative;
 .crop-img {
 position: absolute;
 left: 0;
 top: 0;


To put it simply, the outer element controls the width and height of the cropped display. At the same time, the positioning of elements according to project requirements is also hung here. The actual size and offset of the internal img mounted image are also hung here.

The element initialized by cropperjs will be at the same dom level as the initialization object img. That is to say, if we directly initialize the display img, the editing area display will be affected by the parent element, as shown in the figure. When the picture is enlarged, it will Do not view the excess parts

So here, for the freedom of image editing, it is recommended to display the DOM and the DOM used to initialize the cropper object separately. Here, the editing area is the full screen as an example, and the adjustments should be made according to the actual functional area of ​​the project

 .edit-container {
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;


 //cropper initialization
 this.myRef = React.createRef();
 this.myCropper = new Cropper(this.myRef.current, options);
 //options configuration
 const optiOns= {
 dragMode: 'move', //Make the picture draggable when cropping
 background: false, //Because we are now full-screen editable, we need to hide the default background
 //Of course there are many common configuration items, such as edit box size ratio, etc. You can check the API by yourself
 //Crop and save
 save() {
 const cropBoxData = this.myCropper.getCropBoxData(); //Get the crop box data
 const canvasData = this.myCropper.getCanvasData(); //Get image data
 width: cropBoxData.width,
 height: cropBoxData.height,
 imgLeft: canvasData.left - cropBoxData.left,
 imgTop: canvasData.top - cropBoxData.top,
 imgWidth: canvasData.width,
 imgHeight: canvasData.height

In this case, we can edit completely in the customized full screen, and the saving effect is as follows. At this point, we have completed the first part of the function, cropping and saving the data and display

Focus on the two API methods we use, getCropBoxData and getCanvasData. getCanvasData is used to obtain the actual data of the image (current width and height, and displacement offset relative to the visible area of ​​the parent element), getCropBoxData It is to obtain data related to the cropping area relative to the image area.

Then the follow-up demand comes next. How can we restore the effect during secondary editing? Well, in fact, when we recorded the cropping data earlier, we just need to calculate the corresponding data relationship again. , add configuration in the options of initializing cropper

 const optiOns= {
 dragMode: 'move',
 background: false,
 //Reset the corresponding configuration after the control is initialized
 ready: () => {
 const { width, height, imgWidth, imgHeight, imgLeft, imgTop } = this.state;
 //The cropping function appears for positioning according to actual needs. Here left and top are only defined as temporary default values ​​for testing.
 const left = 50;
 const top = 50;
 width: imgWidth,
 height: imgHeight,
 left: left,
 top: top
 left: left - imgLeft,
 top: top - imgTop,
 width: width,
 height: height
 this.myCropper = new Cropper(this.myRef.current, options);

At this time we click Crop again��, it is perfectly restored. The gap between the left and top is the top and left of setCanvasData. Adjust it according to the actual project. The left and top of setCropBoxData are positioned relative to the cropper-canvas, so the above calculation form is available.

At this point, the basic functions end here. If it is applied in h5 editing and the design is scaled, the relevant data calculations must include the scaling value of scale, otherwise there will be display pictures and editing pictures. The situation of unequal size. At the same time, there are many functions that I will not show here, such as setting the cropping frame ratio, editing zoom, etc. You are welcome to try it.

Of course, if you want to save the image, there are also corresponding methods to crop the image data everywhere


Finally, we can see that in the entire functional process, all we need is cropped data, which is fast to read and write, and does not require additional image storage, reducing the overhead and optimization of file server storage.

cropperjs github

Thank you all for watching. Discussions and corrections are welcome.

The above is the entire content of this article. I hope it will be helpful to everyone’s study and I hope you will support me a lot.

This article is from the internet and does not represent1024programmerPosition, please indicate the source when reprinting:https://www.1024programmer.com/714811

author: admin

Previous article
Next article

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact us


Online consultation: QQ交谈

E-mail: [email protected]

Working hours: Monday to Friday, 9:00-17:30, holidays off

Follow wechat
Scan wechat and follow us

Scan wechat and follow us

Follow Weibo
Back to top