Jcrop cropping image [1]: frontend js summary, jcropjs

Jcrop cropping image [1]: frontend js summary, jcropjs

Recently, the project has a screenshot effect, so I used the Jcrop framework, looked at the API, and checked some articles on the Internet to complete this function. The process is summarized as follows:

Implementation

Jcrop is used to obtain the starting point XY and the ending point xy of the captured image. In addition, there is the wh In the screenshot range, which is passed to the server, then, the corresponding language APIs on the server side are used for cropping or transparent operations.

Official website URL:

Http://code.ciaoca.com/jquery/jcrop/

The implementation result is as follows:

After Cropping

Function Description

Crop the source image in a fixed range, and then scale down the image to [the corresponding image content must be included]. scale down the source image and crop the circle. Because an avatar is generally used as an avatar, a circle of 200*200 is taken.

Description

Below I will post some code

Below I post some code: <span style = "white-space: pre"> </span> // insert an image into ('{target-img'}.html (''); $ ('# target-img '). append (''); $ ('. close '). click (); $ scope. showHeadImg (); <span style = "white-space: pre"> </span> // declare jcrop to crop an image <span style = "white-space: pre "> </span> $ ('# target '). jcrop ({onChange: showCoords, onSelect: showCoords, onRelease: clearCoords, setSelect: [200,200,], aspectRatio: 1}, function () {jcrop_api = this; <span style = "white-space: pre"> </span> });

RESPONSE event

<script> function changeTable(obj){$('.bootTab').removeClass('active');$(obj).addClass('active');var tabcontent = $(obj).attr('data-target');$('.tab-pane').removeClass('active');$('#'+tabcontent).addClass('active');} function showCoords(c)  {    $('#x1').val(parseInt(c.x));    $('#y1').val(parseInt(c.y));    $('#x2').val(parseInt(c.x2));    $('#y2').val(parseInt(c.y2));    $('#w').val(parseInt(c.w));    $('#h').val(parseInt(c.h));  };  function clearCoords()  {    $('#coords input').val('');  };</script>

Summary:

Jcrop basically works like this. It uses binding an img component to render the effect of the cropping control. The corresponding code in the official website case can be copied and used, you can obtain the coordinates of the start point and end point of the preceding coordinates. In addition, the width and height are used to control the cube. Set the attribute value to 1. The corresponding other attributes are clearly displayed at the official Internet cafe.

Problem

When using Jcrop, the image size problem often occurs. That is, if the image is too large, boxWidth or other CSS is used to limit the original pixel value of the image,Cause the image to shrink,At this time, the selection box gets the corresponding coordinates of the image, and the coordinates passed to the background are not the actual coordinates of the image, so the cropped coordinates are not the areas we want. At this time, we must ensure that the coordinates we pass are real-time. Instead of selecting the coordinates of the image. Many people have encountered this problem. Generally, there are two solutions: the first one is selected by an individual ..

1. display the image regardless of its size.

2. display the image according to a certain proportion, but transfer it to the background requires a proportional conversion.