Official API There is such an attribute in ：smallImage string Solve the problem that small pictures cannot be uploaded After cutting, The size of the picture will be larger than the originalįor editing JS The function is ：$('.image-editor').cropit(), There are many parameters that can be configured (1).The edge of the picture is attached to the edge of the box, Unable to move freely.Limited to page size and experience, Can't cut big picture ( It needs to be cut into 800*800, But this will take up a lot of screen space ).When the size of the uploaded image is lower than the box size of the preview image, The picture doesn't show.cropit-preview The size of the preview box where the class is located. In the simple use above, The size of the cut picture is. matters needing attention ：$('.image-editor').cropit('export') Medium export Is a parameter of the plug-in clip, No Html Medium ID, Non modifiable Var imageData = $('.image-editor').cropit('export') The page effect is as shown in the figure :
#.cropit jquery code
Ībout the code structure of the foreground, Code up Here we need to pay attention to ： cropit.js Don't support the latest jQuery edition, The official use is jQuery-2.0.0 edition, Actually measured jQuery-3.1.1 Version not supported cropit.js, however jQuery-1.12.4 Versioning support cropit.js, because jQuery Too many versions, Bloggers don't have one to test, However, please check the reference before using jQuery Does the version support. Ĭropit.js Depend on jQuery, In the use of cropit.js It is necessary to introduce cropit.js Before introducing jQuery This blog will systematically talk about cropit.js Use of and configuration of common parameters. official file （ It may not open smoothly, Refresh several times ）Ĭropit.js The plug-in is a very powerful 、 convenient 、 Convenient front end JS Cut plug-in, Through a specific div Layout the code structure ,CSS The style can be made completely, The most convenient thing is that you can directly convert the cut picture into base64 The encoding format of, And you can set different parameters, Get different files and effects. The project needs to upload pictures, But the pictures uploaded directly on the front desk will appear 、 Size mismatch problem, Stepping on more than one JS After the pit of the plug-in, Found out cropit.js plug-in unit, However, there are no Chinese documents, The content of domestic blogs does not match their own needs, No way out, Reading English documents, Step on the thunder one by one.
0 kommentar(er)
